ข้อมูลอ้างอิงฟีเจอร์เครือข่าย

Kayce Basques

Sofia Emelianova

ค้นพบวิธีใหม่ๆ ในการวิเคราะห์วิธีโหลดหน้าเว็บของคุณในข้อมูลอ้างอิงที่ครอบคลุมนี้เกี่ยวกับฟีเจอร์การวิเคราะห์เครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

บันทึกคำขอเครือข่าย

โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกคำขอเครือข่ายทั้งหมดในแผงเครือข่าย ตราบใดที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่

หยุดบันทึกคำขอของเครือข่าย

วิธีหยุดคำขอบันทึก

• คลิกหยุดเก็บบันทึกเครือข่าย ในแผงเครือข่าย ปุ่มจะเปลี่ยนเป็นสีเทาเพื่อระบุว่าเครื่องมือสำหรับนักพัฒนาเว็บไม่ได้บันทึกคำขออีกต่อไป
• กด Command + E (Mac) หรือ Control + E (Windows, Linux) ขณะที่แผงเครือข่ายโฟกัสอยู่

ล้างคำขอ

คลิกล้าง ในแผงเครือข่ายเพื่อล้างคำขอทั้งหมดจากตารางคำขอ

บันทึกคำขอในการโหลดหน้าเว็บ

หากต้องการบันทึกคำขอเมื่อโหลดหน้าเว็บ ให้เลือกช่องทำเครื่องหมายเก็บรักษาบันทึกในแผงเครือข่าย เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกคำขอทั้งหมดจนกว่าคุณจะปิดใช้เก็บรักษาบันทึก

จับภาพหน้าจอระหว่างการโหลดหน้าเว็บ

จับภาพหน้าจอเพื่อวิเคราะห์สิ่งที่ผู้ใช้เห็นขณะรอให้หน้าเว็บโหลด

หากต้องการเปิดใช้ภาพหน้าจอ ให้เปิดการตั้งค่า ในแผงเครือข่าย แล้วเลือกจับภาพหน้าจอ

โหลดหน้าเว็บซ้ำขณะที่แผงเครือข่ายที่โฟกัสเพื่อจับภาพหน้าจอ

เมื่อจับภาพหน้าจอแล้ว คุณจะโต้ตอบกับภาพหน้าจอได้ด้วยวิธีต่อไปนี้

• วางเมาส์เหนือภาพหน้าจอเพื่อดูจุดที่จับภาพหน้าจอนั้น เส้นสีเหลือง จะปรากฏในไทม์ไลน์ภาพรวม
• คลิกภาพขนาดย่อของภาพหน้าจอเพื่อกรองคำขอที่เกิดขึ้นหลังจากที่จับภาพหน้าจอ แล้ว
• ดับเบิลคลิกภาพขนาดย่อเพื่อซูมเข้า

เล่นคำขอ XHR ซ้ำ

หากต้องการเล่นคำขอ XHR อีกครั้ง ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้ในตารางคำขอ

• เลือกคำขอแล้วกด R
• คลิกขวาที่คำขอ แล้วเลือก Replay XHR

เปลี่ยนลักษณะการทำงานของการโหลด

จำลองผู้เข้าชมครั้งแรกโดยการปิดใช้แคชของเบราว์เซอร์

หากต้องการจำลองประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้ครั้งแรก ให้เลือกช่องทําเครื่องหมายปิดใช้แคช เครื่องมือสำหรับนักพัฒนาเว็บจะปิดใช้แคชของเบราว์เซอร์ ซึ่งจะจำลองประสบการณ์ของผู้ใช้ครั้งแรกได้แม่นยำยิ่งขึ้น เนื่องจากระบบจะแสดงคำขอจากแคชของเบราว์เซอร์ในการเข้าชมซ้ำ

ปิดใช้แคชของเบราว์เซอร์จากลิ้นชักเงื่อนไขเครือข่าย

หากต้องการปิดใช้แคชขณะทำงานในแผง DevTools อื่น ให้ใช้ลิ้นชักเงื่อนไขเครือข่าย

1. คลิกไอคอน เพื่อเปิดลิ้นชักเงื่อนไขของเครือข่าย
2. เลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายปิดใช้แคช

ล้างแคชของเบราว์เซอร์ด้วยตนเอง

หากต้องการล้างแคชของเบราว์เซอร์ด้วยตนเองเมื่อใดก็ได้ ให้คลิกขวาที่ใดก็ได้ในตารางคำขอ แล้วเลือกล้างแคชของเบราว์เซอร์

จำลองแบบออฟไลน์

มีเว็บแอปประเภทใหม่ที่เรียกว่า Progressive Web App ซึ่งทำงานแบบออฟไลน์ได้ด้วยความช่วยเหลือจาก Service Worker เมื่อสร้างแอปประเภทนี้ คุณควรจำลองอุปกรณ์ที่ไม่มีการเชื่อมต่อข้อมูลได้อย่างรวดเร็ว

หากต้องการจำลองประสบการณ์การใช้งานเครือข่ายแบบออฟไลน์โดยสมบูรณ์ ให้เลือกออฟไลน์จากเมนูแบบเลื่อนลงการควบคุมเครือข่ายข้างช่องทําเครื่องหมายปิดใช้แคช

เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไอคอนคำเตือนข้างแท็บเครือข่ายเพื่อเตือนว่าคุณได้เปิดใช้โหมดออฟไลน์แล้ว

จำลองการเชื่อมต่อเครือข่ายที่ช้า

หากต้องการจำลอง 4G เร็ว 4G ช้า หรือ 3G ให้เลือกค่าที่กำหนดล่วงหน้าที่เกี่ยวข้องจากเมนูแบบเลื่อนลงการควบคุมในแถบการดำเนินการที่ด้านบน

เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไอคอนคำเตือนข้างแผงเครือข่ายเพื่อเตือนว่ามีการเปิดใช้การควบคุมอัตรา

สร้างโปรไฟล์การควบคุมอัตราที่กำหนดเอง

นอกจากค่าที่กำหนดล่วงหน้า เช่น 4G แบบช้าหรือเร็วแล้ว คุณยังเพิ่ม โปรไฟล์การควบคุมอัตราที่กำหนดเองได้ด้วย

1. เปิดเมนูการจำกัดอัตรา แล้วเลือกกำหนดเอง > เพิ่ม...
2. ตั้งค่าโปรไฟล์การควบคุมปริมาณใหม่ตามที่อธิบายไว้ในการตั้งค่า การตั้งค่า > การควบคุมปริมาณ

3. กลับไปที่แผงเครือข่าย แล้วเลือกโปรไฟล์ใหม่จากเมนูแบบเลื่อนลงการจำกัดอัตรา

   

DevTools จะแสดงไอคอนคำเตือนข้างแผงเครือข่ายเพื่อเตือนว่ามีการเปิดใช้การควบคุม

ควบคุมการเชื่อมต่อ WebSocket

นอกเหนือจากคำขอ HTTP แล้ว DevTools ยังจำกัดการเชื่อมต่อ WebSocket ตั้งแต่เวอร์ชัน 99 เป็นต้นมาด้วย

วิธีสังเกตการควบคุม WebSocket

1. เริ่มการเชื่อมต่อใหม่ เช่น โดยใช้เครื่องมือทดสอบ
2. ในแผงเครือข่าย ให้เลือกไม่มีการควบคุม แล้วส่งข้อความผ่านการเชื่อมต่อ
3. สร้างโปรไฟล์การควบคุมอัตราที่กำหนดเองที่ช้ามาก เช่น 10 kbit/s โปรไฟล์ที่ช้าเช่นนี้จะช่วยให้คุณสังเกตเห็นความแตกต่างได้
4. ในแผงเครือข่าย ให้เลือกโปรไฟล์แล้วส่งข้อความอีกครั้ง
5. สลับตัวกรอง WS คลิกชื่อการเชื่อมต่อ เปิดแท็บข้อความ และตรวจสอบความแตกต่างของเวลาระหว่างข้อความที่ส่งและข้อความที่ตอบกลับโดยมีการควบคุมอัตราและไม่มีการควบคุมอัตรา เช่น

จำลองการเชื่อมต่อเครือข่ายที่ช้าจากลิ้นชักเงื่อนไขของเครือข่าย

หากต้องการควบคุมการเชื่อมต่อเครือข่ายขณะทำงานในแผงอื่นๆ ของ DevTools ให้ใช้ลิ้นชักเงื่อนไขเครือข่าย

1. คลิกไอคอน เพื่อเปิดลิ้นชักเงื่อนไขของเครือข่าย
2. เลือกความเร็วในการเชื่อมต่อจากเมนูการควบคุมเครือข่าย

ล้างคุกกี้ของเบราว์เซอร์ด้วยตนเอง

หากต้องการล้างคุกกี้ของเบราว์เซอร์ด้วยตนเองได้ทุกเมื่อ ให้คลิกขวาที่ใดก็ได้ในตารางคำขอ แล้วเลือกล้างคุกกี้ของเบราว์เซอร์

ลบล้างส่วนหัวการตอบกลับ HTTP

ดูลบล้างไฟล์และส่วนหัวการตอบกลับ HTTP ในเครื่อง

ลบล้าง User Agent

วิธีลบล้าง User Agent ด้วยตนเอง

1. คลิกไอคอน เพื่อเปิดลิ้นชักเงื่อนไขของเครือข่าย
2. ยกเลิกการเลือกเลือกอัตโนมัติ
3. เลือกตัวเลือก User Agent จากเมนู หรือป้อนตัวเลือกที่กำหนดเองในช่อง

คำขอค้นหา

หากต้องการค้นหาส่วนหัวของคำขอ เพย์โหลด และการตอบกลับ ให้ทำดังนี้

1. กดแป้นพิมพ์ลัดต่อไปนี้เพื่อเปิดแท็บค้นหาทางด้านขวา

   • ใน macOS ให้กด Command + F
   • ใน Windows หรือ Linux ให้กด Control + F

2. ในแท็บค้นหา ให้ป้อนคำค้นหาแล้วกด Enter คุณสามารถคลิก match_case หรือ regular_expression เพื่อเปิดใช้การคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่หรือนิพจน์ทั่วไปตามลำดับ

3. คลิกผลการค้นหา แผงเครือข่ายจะไฮไลต์คำขอที่ตรงกันเป็นสีเหลือง นอกจากนี้ แผงยังเปิดแท็บส่วนหัวหรือการตอบกลับ และไฮไลต์สตริงที่ตรงกัน (หากมี)

หากต้องการรีเฟรชผลการค้นหา ให้คลิกรีเฟรช รีเฟรช หากต้องการล้างผลการค้นหา ให้คลิกบล็อก ล้าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีค้นหาในเครื่องมือสำหรับนักพัฒนาเว็บทั้งหมดได้ที่ค้นหา: ค้นหาข้อความในทรัพยากรที่โหลดทั้งหมด

กรองคำขอ

กรองคำขอตามพร็อพเพอร์ตี้

ใช้ช่องตัวกรองเพื่อกรองคำขอตามพร็อพเพอร์ตี้ เช่น โดเมนหรือขนาดของคำขอ

หากไม่เห็นช่องดังกล่าว แสดงว่าแถบตัวกรองอาจซ่อนอยู่ ดูซ่อนแถบตัวกรอง

หากต้องการกลับตัวกรอง ให้เลือกช่องทำเครื่องหมายกลับข้างช่องตัวกรอง

คุณใช้พร็อพเพอร์ตี้หลายรายการพร้อมกันได้โดยคั่นแต่ละพร็อพเพอร์ตี้ด้วยการเว้นวรรค เช่น mime-type:image/gif larger-than:1K จะแสดง GIF ทั้งหมดที่มีขนาดใหญ่กว่า 1 กิโลไบต์ ตัวกรองแบบหลายพร็อพเพอร์ตี้เหล่านี้เทียบเท่ากับการดำเนินการ AND ไม่รองรับการดำเนินการ OR

ต่อไปนี้คือรายการพร็อพเพอร์ตี้ที่รองรับทั้งหมด

• cookie-domain แสดงทรัพยากรที่ตั้งค่าโดเมนคุกกี้ที่เฉพาะเจาะจง
• cookie-name. แสดงทรัพยากรที่ตั้งค่าชื่อคุกกี้ที่เฉพาะเจาะจง
• cookie-path แสดงทรัพยากรที่ตั้งค่าเส้นทางคุกกี้ที่เฉพาะเจาะจง
• cookie-value. แสดงทรัพยากรที่ตั้งค่าคุกกี้ที่เฉพาะเจาะจง
• domain แสดงเฉพาะทรัพยากรจากโดเมนที่ระบุ คุณสามารถใช้อักขระไวลด์การ์ด (*) เพื่อรวมหลายโดเมนได้ ตัวอย่างเช่น *.com จะแสดงทรัพยากรจากชื่อโดเมนทั้งหมดที่ลงท้ายด้วย .com DevTools จะแสดงเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติพร้อมโดเมนทั้งหมดที่พบ
• has-overrides แสดงคำขอที่แทนที่ content, headers, การแทนที่ทั้งหมด (yes) หรือไม่มีการแทนที่ (no) คุณสามารถเพิ่มคอลัมน์มีการแทนที่ที่เกี่ยวข้องลงในตารางคำขอได้
• has-response-header แสดงทรัพยากรที่มีส่วนหัวการตอบกลับ HTTP ที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนข้อมูลส่วนหัวของการตอบกลับทั้งหมดที่พบลงในเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติ
• is ใช้ is:running เพื่อค้นหาแหล่งข้อมูล WebSocket
• larger-than แสดงทรัพยากรที่มีขนาดใหญ่กว่าที่ระบุในหน่วยไบต์ การตั้งค่าเป็น 1000 จะเทียบเท่ากับการตั้งค่าเป็น 1k
• method แสดงทรัพยากรที่ดึงข้อมูลผ่านประเภทเมธอด HTTP ที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนข้อมูลลงในเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติด้วยเมธอด HTTP ทั้งหมดที่พบ
• mime-type แสดงทรัพยากรที่มีประเภท MIME ที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนข้อมูลในเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติ ด้วยประเภท MIME ทั้งหมดที่พบ
• mixed-content แสดงเนื้อหาผสมทั้งหมด (mixed-content:all) หรือเฉพาะเนื้อหาที่แสดง (mixed-content:displayed)
• priority แสดงทรัพยากรที่มีระดับลำดับความสำคัญตรงกับค่าที่ระบุ
• resource-type แสดงทรัพยากรของประเภททรัพยากร เช่น รูปภาพ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนข้อมูลลงในเมนูแบบเลื่อนลงของ การเติมข้อความอัตโนมัติด้วยทรัพยากรทุกประเภทที่พบ
• response-header-set-cookie แสดงส่วนหัว Set-Cookie ดิบในแท็บปัญหา คุกกี้ที่จัดรูปแบบไม่ถูกต้อง ซึ่งมีส่วนหัว Set-Cookie ไม่ถูกต้องจะได้รับการแจ้งในแผงเครือข่าย
• scheme แสดงทรัพยากรที่ดึงข้อมูลผ่าน HTTP ที่ไม่มีการป้องกัน (scheme:http) หรือ HTTPS ที่มีการป้องกัน (scheme:https)
• set-cookie-domain แสดงทรัพยากรที่มีส่วนหัว Set-Cookie ที่มีแอตทริบิวต์ Domain ซึ่งตรงกับค่าที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนข้อมูลการเติมข้อความอัตโนมัติด้วยโดเมนคุกกี้ทั้งหมดที่พบ
• set-cookie-name แสดงทรัพยากรที่มีส่วนหัว Set-Cookie ซึ่งมีชื่อตรงกับค่าที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนชื่อคุกกี้ทั้งหมดที่พบลงในการเติมข้อความอัตโนมัติ
• set-cookie-value แสดงทรัพยากรที่มีส่วนหัว Set-Cookie ที่มีค่าตรงกับค่าที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนค่าคุกกี้ทั้งหมดที่พบลงในฟีเจอร์เติมข้อความอัตโนมัติ
• status-code แสดงเฉพาะทรัพยากรที่มีรหัสสถานะ HTTP ตรงกับรหัสที่ระบุ DevTools จะป้อนข้อมูลเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติด้วยรหัสสถานะทั้งหมดที่พบ
• url แสดงทรัพยากรที่มี url ตรงกับค่าที่ระบุ

กรองคำขอตามประเภท

หากต้องการกรองคำขอตามประเภททรัพยากร ให้คลิกปุ่มทั้งหมด, Fetch/XHR, JS, CSS, Img, สื่อ, แบบอักษร, เอกสาร, WS (WebSocket), Wasm (WebAssembly), Manifest หรืออื่นๆ (ประเภทอื่นๆ ที่ไม่ได้ระบุไว้ที่นี่) ในแผงเครือข่าย

หากไม่เห็นปุ่มเหล่านี้ แสดงว่าแถบการดำเนินการตัวกรองอาจซ่อนอยู่ ดูซ่อนแถบตัวกรอง

หากต้องการแสดงแหล่งข้อมูลหลายประเภทพร้อมกัน ให้กด Command (Mac) หรือ Control (Windows, Linux) ค้างไว้ แล้วคลิกตัวกรองประเภทหลายรายการ

กรองคำขอตามเวลา

ลากไปทางซ้ายหรือขวาในไทม์ไลน์ภาพรวมเพื่อแสดงเฉพาะคำขอที่ใช้งานอยู่ในช่วงเวลาดังกล่าว ตัวกรองนี้จะรวมรายการที่ตรงกันทั้งหมด ระบบจะแสดงคำขอที่ใช้งานอยู่ในช่วงเวลาที่ไฮไลต์

ซ่อน URL ข้อมูล

URL ของข้อมูลคือไฟล์ขนาดเล็กที่ฝังอยู่ในเอกสารอื่นๆ คำขอใดก็ตามที่คุณเห็นในตารางคำขอที่ขึ้นต้นด้วย data: คือ URL ข้อมูล

หากต้องการซ่อนคำขอเหล่านี้ ในแถบการดำเนินการตัวกรอง ให้เลือกตัวกรองเพิ่มเติม > check_box ซ่อน URL ของข้อมูล

แถบสถานะที่ด้านล่างจะแสดงจำนวนคำขอที่แสดงจากคำขอทั้งหมด

ซ่อน URL ส่วนขยาย

หากต้องการโฟกัสที่โค้ดที่คุณเขียน คุณสามารถกรองคำขอที่ไม่เกี่ยวข้องซึ่งส่งโดยส่วนขยายที่คุณอาจติดตั้งใน Chrome ออกได้ คำขอส่วนขยายมี URL ที่ขึ้นต้นด้วย chrome-extension://

หากต้องการซ่อนคำขอส่วนขยาย ให้เลือกตัวกรองเพิ่มเติมในแถบการดำเนินการของตัวกรอง > check_box ซ่อน URL ของส่วนขยาย

แถบสถานะที่ด้านล่างจะแสดงจำนวนคำขอที่แสดงจากคำขอทั้งหมด

แสดงเฉพาะคำขอที่มีคุกกี้การตอบสนองที่ถูกบล็อก

หากต้องการกรองทุกอย่างออก ยกเว้นคำขอที่มีคุกกี้การตอบสนองที่ถูกบล็อกไม่ว่าด้วยเหตุผลใดก็ตาม ให้เลือกตัวกรองเพิ่มเติม > check_box คุกกี้การตอบสนองที่ถูกบล็อก ในแถบการดำเนินการตัวกรอง

แถบสถานะที่ด้านล่างจะแสดงจำนวนคำขอที่แสดงจากคำขอทั้งหมด

หากต้องการทราบเหตุผลที่ระบบบล็อกคุกกี้คำตอบ ให้เลือกคำขอ เปิดแท็บคุกกี้ แล้ววางเมาส์เหนือไอคอนข้อมูลข้อมูล

นอกจากนี้ แผงเครือข่ายยังแสดงไอคอนคำเตือนข้างคำขอที่มีคุกกี้ถูกบล็อกเนื่องจาก Chrome Flag หรือการกำหนดค่า วางเมาส์เหนือไอคอนเพื่อดูเคล็ดลับเครื่องมือที่มีคำใบ้ แล้วคลิกเพื่อไปที่แผงปัญหาเพื่อดูข้อมูลเพิ่มเติม

แสดงเฉพาะคำขอที่ถูกบล็อก

หากต้องการกรองทุกอย่างออก ยกเว้นคำขอที่ถูกบล็อก ให้เลือกตัวกรองเพิ่มเติมในแถบการดำเนินการตัวกรอง > check_box คำขอที่ถูกบล็อก หากต้องการทดสอบ ให้ใช้แท็บการบล็อกคำขอเครือข่ายในลิ้นชัก

ตารางคำขอจะไฮไลต์คำขอที่ถูกบล็อกเป็นสีแดง แถบสถานะที่ด้านล่างจะแสดงจำนวนคำขอที่แสดงจากคำขอทั้งหมด

แสดงเฉพาะคำขอของบุคคลที่สาม

หากต้องการกรองทุกอย่างออก ยกเว้นคำขอที่มีต้นทางแตกต่างจากต้นทางของหน้าเว็บ ให้เลือกตัวกรองเพิ่มเติม > check_box คำขอของบุคคลที่สาม ในแถบการดำเนินการตัวกรอง

แถบสถานะที่ด้านล่างจะแสดงจำนวนคำขอที่แสดงจากคำขอทั้งหมด

คำขอการจัดเรียง

โดยค่าเริ่มต้น ระบบจะจัดเรียงคำขอในตารางคำขอตามเวลาเริ่มต้น แต่คุณสามารถจัดเรียงตาราง โดยใช้เกณฑ์อื่นๆ ได้

จัดเรียงตามคอลัมน์

คลิกส่วนหัวของคอลัมน์ใดก็ได้ในตารางคำขอเพื่อจัดเรียงคำขอตามคอลัมน์นั้น

จัดเรียงตามระยะกิจกรรม

หากต้องการเปลี่ยนวิธีที่น้ำตกจัดเรียงคำขอ ให้คลิกขวาที่ส่วนหัวของตารางคำขอ วางเมาส์เหนือน้ำตก แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

• เวลาเริ่มต้น คำขอแรกที่เริ่มต้นจะอยู่ด้านบน
• เวลาตอบสนอง คำขอแรกที่เริ่มดาวน์โหลดจะอยู่ด้านบน
• เวลาสิ้นสุด คำขอแรกที่เสร็จสมบูรณ์จะอยู่ด้านบน
• ระยะเวลารวม คำขอที่มีการตั้งค่าการเชื่อมต่อและคำขอ / คำตอบที่สั้นที่สุดจะอยู่ด้านบน
• เวลาในการตอบสนอง คำขอที่รอการตอบกลับนานที่สุดจะอยู่ด้านบน

คำอธิบายเหล่านี้ถือว่าตัวเลือกที่เกี่ยวข้องแต่ละรายการได้รับการจัดอันดับจากสั้นที่สุดไปยาวที่สุด การคลิกส่วนหัวของคอลัมน์ Waterfall จะเป็นการย้อนกลับลำดับ

ในตัวอย่างนี้ ระบบจะจัดเรียง Waterfall ตามระยะเวลารวม ส่วนที่สว่างกว่าของแต่ละแท่งคือเวลา ที่ใช้ในการรอ ส่วนที่เข้มกว่าคือเวลาที่ใช้ในการดาวน์โหลดไบต์

วิเคราะห์คำขอ

ตราบใดที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่ ระบบจะบันทึกคำขอทั้งหมดในแผงเครือข่าย ใช้แผงเครือข่ายเพื่อ วิเคราะห์คำขอ

ดูบันทึกคำขอ

ใช้ตารางคำขอเพื่อดูบันทึกคำขอทั้งหมดที่ทำขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่ การคลิกหรือวางเมาส์เหนือคำขอจะแสดงข้อมูลเพิ่มเติมเกี่ยวกับคำขอเหล่านั้น

ตารางคำขอจะแสดงคอลัมน์ต่อไปนี้โดยค่าเริ่มต้น

• ชื่อ ชื่อไฟล์หรือตัวระบุของทรัพยากร

• สถานะ คอลัมน์นี้อาจแสดงค่าต่อไปนี้

  

  • รหัสสถานะ HTTP เช่น 200 หรือ 404
  • CORS error สำหรับคำขอที่ล้มเหลวเนื่องจากกลไกการแชร์ทรัพยากรข้ามโดเมน (CORS)
  • (blocked:origin) สำหรับคำขอที่มีส่วนหัวที่กำหนดค่าไม่ถูกต้อง วางเมาส์เหนือค่าสถานะนี้เพื่อดูเคล็ดลับเกี่ยวกับสิ่งที่ผิดพลาด
  • (failed) ตามด้วยข้อความแสดงข้อผิดพลาด

• ประเภท ประเภท MIME ของทรัพยากรที่ขอ

• ผู้เริ่ม ออบเจ็กต์หรือกระบวนการต่อไปนี้สามารถเริ่มต้นคำขอได้

  • Parser โปรแกรมแยกวิเคราะห์ HTML ของ Chrome
  • เปลี่ยนเส้นทาง การเปลี่ยนเส้นทางด้วย HTTP
  • สคริปต์ ฟังก์ชัน JavaScript ในกรณีนี้ แผงเครือข่ายจะแสดงลิงก์ไปยังบรรทัดที่เกี่ยวข้องในไฟล์ต้นฉบับ
  • อื่นๆ กระบวนการหรือการดำเนินการอื่นๆ เช่น การไปยังหน้าเว็บโดยใช้ลิงก์หรือการป้อน URL ในแถบที่อยู่

• ขนาด ขนาดรวมของส่วนหัวการตอบกลับและเนื้อหาการตอบกลับตามที่เซิร์ฟเวอร์ส่ง

• เวลา ระยะเวลาทั้งหมดตั้งแต่เริ่มคำขอจนถึงได้รับไบต์สุดท้ายในการตอบกลับ

• น้ำตก รายละเอียดกิจกรรมของคำขอแต่ละรายการในรูปแบบภาพ

เพิ่มหรือลบคอลัมน์

คลิกขวาที่ส่วนหัวของตารางคำขอ แล้วเลือกตัวเลือกเพื่อซ่อนหรือแสดง ตัวเลือกที่แสดงจะมีเครื่องหมายถูกอยู่ข้างๆ

คุณเพิ่มหรือนำคอลัมน์เพิ่มเติมต่อไปนี้ออกได้

• เส้นทาง ส่วนเส้นทางของ URL
• URL URL แบบเต็มของคำขอ
• คำขอ # ลำดับการเริ่มต้นคำขอที่แน่นอน
• วิธีการ เมธอด HTTP ของคำขอ (เช่น GET, POST, PUT, DELETE)
• โปรโตคอล โปรโตคอลของคำขอ (เช่น h2 สำหรับ HTTP/2, h3 สำหรับ HTTP/3 เป็นต้น)
• รูปแบบ ส่วนรูปแบบของ URL
• โดเมน ส่วนโดเมนของ URL
• ที่อยู่ระยะไกล ที่อยู่ IP ระยะไกลและพอร์ตของคำขอ
• พื้นที่สำหรับที่อยู่ระยะไกล พื้นที่สำหรับที่อยู่ระยะไกลของคำขอ Public สำหรับ IP สาธารณะ Private สำหรับ IP ส่วนตัว
• พื้นที่ที่อยู่ของผู้ริเริ่ม พื้นที่ที่อยู่ผู้ริเริ่มของคำขอ เหมือนกับรีโมต
• คุกกี้ จำนวนคุกกี้ในคำขอ
• ตั้งค่าคุกกี้ จำนวนคุกกี้ในการตอบกลับ
• รายการสำคัญ ลำดับความสำคัญของคำขอ
• รหัสการเชื่อมต่อ รหัสการเชื่อมต่อของคำขอในเซสชันไคลเอ็นต์ (หากมี)
• มีการลบล้าง คำขอมีการลบล้างหรือไม่ (ใช่ ไม่ เนื้อหา หรือส่วนหัว)
• เกี่ยวข้องกับโฆษณา จริงหรือเท็จ
• การบล็อกการแสดงผล ไม่ว่าคำขอจะบล็อกการแสดงผล อาจบล็อก หรือไม่บล็อก
• น้ำตก รายละเอียดกิจกรรมของคำขอแต่ละรายการในรูปแบบภาพ

เพิ่มคอลัมน์ที่กำหนดเอง

วิธีเพิ่มคอลัมน์ที่กําหนดเองลงในตารางคำขอ

1. คลิกขวาที่ส่วนหัวของตารางคำขอ แล้วเลือกส่วนหัวของการตอบกลับ > จัดการคอลัมน์ส่วนหัว
2. ในหน้าต่างกล่องโต้ตอบ ให้คลิกเพิ่มส่วนหัวที่กำหนดเอง ป้อนชื่อ แล้วคลิกเพิ่ม

จัดกลุ่มคำขอตามเฟรมแบบอินไลน์

หากเฟรมแบบอินไลน์ในหน้าเว็บสร้างคำขอจำนวนมาก คุณสามารถทำให้บันทึกคำขอเป็นมิตรมากขึ้นได้โดยการจัดกลุ่มคำขอ

หากต้องการจัดกลุ่มคำขอตาม iframe ให้เปิดการตั้งค่า ภายในแผงเครือข่าย แล้วเลือก check_box จัดกลุ่มตามเฟรม

หากต้องการดูคำขอที่เริ่มต้นโดยเฟรมแบบอินไลน์ ให้ขยายคำขอดังกล่าวในบันทึกคำขอ

ดูเวลาของคำขอที่เกี่ยวข้องกับคำขออื่นๆ

ใช้ Waterfall เพื่อดูเวลาของคำขอที่เกี่ยวข้องกับคำขออื่นๆ โดยค่าเริ่มต้น ระบบจะจัดระเบียบWaterfall ตามเวลาเริ่มต้นของคำขอ ดังนั้น คำขอที่อยู่ทางซ้าย จะเริ่มก่อนคำขอที่อยู่ทางขวา

ดูจัดเรียงตามระยะกิจกรรมเพื่อดูวิธีต่างๆ ในการจัดเรียงลำดับขั้น

วิเคราะห์ข้อความของการเชื่อมต่อ WebSocket

วิธีดูข้อความของการเชื่อมต่อ WebSocket

1. ในคอลัมน์ชื่อของตารางคำขอ ให้คลิก URL ของการเชื่อมต่อ WebSocket
2. เปิดแท็บข้อความ ตารางจะแสดงข้อความ 100 รายการล่าสุด

หากต้องการรีเฟรชตาราง ให้คลิกชื่อการเชื่อมต่อ WebSocket อีกครั้งในคอลัมน์ชื่อของตารางคำขอ

ตารางมี 3 คอลัมน์ดังนี้

• ข้อมูล เพย์โหลดของข้อความ หากข้อความเป็นข้อความธรรมดา ข้อความจะแสดงที่นี่ สำหรับโอเปอเรชันโค้ดไบนารี คอลัมน์นี้จะแสดงชื่อและโค้ดของโอเปอเรชันโค้ด ระบบรองรับ Opcode ต่อไปนี้ เฟรมความต่อเนื่อง เฟรมไบนารี เฟรมปิดการเชื่อมต่อ เฟรม Ping และเฟรม Pong
• ความยาว ความยาวของเพย์โหลดของข้อความเป็นไบต์
• เวลา เวลาที่ได้รับหรือส่งข้อความ

ข้อความจะมีการกำหนดสีตามประเภท ดังนี้

• ข้อความขาออกจะเป็นสีเขียวอ่อน
• ข้อความเข้าจะเป็นสีขาว
• Opcode ของ WebSocket เป็นสีเหลืองอ่อน
• ข้อผิดพลาดเป็นสีแดงอ่อน

วิเคราะห์เหตุการณ์ในสตรีม

หากต้องการดูกิจกรรมที่เซิร์ฟเวอร์สตรีมผ่าน Fetch API, EventSource API และ XHR ให้ทำดังนี้

1. บันทึกคำขอเครือข่ายในหน้าเว็บที่สตรีมเหตุการณ์
2. ในเครือข่าย ให้เลือกคำขอและเปิดแท็บ EventStream

หากต้องการกรองเหตุการณ์ ให้ระบุนิพจน์ทั่วไปในแถบตัวกรองที่ด้านบนของแท็บ EventStream

หากต้องการล้างรายการเหตุการณ์ที่บันทึกไว้ ให้คลิกบล็อก ล้าง

ดูตัวอย่างเนื้อหาการตอบกลับ

วิธีดูตัวอย่างเนื้อหาการตอบกลับ

1. เลือกคำขอในคอลัมน์ชื่อในตารางคำขอ
2. เปิดแท็บแสดงตัวอย่าง

แท็บนี้มีประโยชน์มากที่สุดสำหรับการดูรูปภาพ

ดูเนื้อหาการตอบกลับ

วิธีดูเนื้อหาการตอบกลับคำขอ

1. เลือกคำขอในคอลัมน์ชื่อในตารางคำขอ
2. เปิดแท็บคำตอบ

ดูส่วนหัว HTTP

วิธีดูข้อมูลส่วนหัว HTTP ของคำขอ

1. เลือกคำขอในคอลัมน์ชื่อในตารางคำขอ
2. เปิดแท็บส่วนหัว แล้วเลื่อนลงไปที่ส่วนทั่วไป ส่วนหัวของการตอบกลับ ส่วนหัวของคำขอ และส่วนส่วนหัวของคำแนะนำเบื้องต้น (ไม่บังคับ)

ในส่วนทั่วไป เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อความสถานะที่มนุษย์อ่านได้ข้างรหัสสถานะ HTTP ที่ได้รับ

ในส่วนส่วนหัวการตอบกลับ คุณสามารถวางเมาส์เหนือค่าส่วนหัว แล้วคลิกปุ่มแก้ไข แก้ไข เพื่อลบล้างส่วนหัวการตอบกลับในเครื่อง

ดูแหล่งที่มาของส่วนหัว HTTP

โดยค่าเริ่มต้น แท็บส่วนหัวจะแสดงชื่อส่วนหัวตามลำดับตัวอักษร หากต้องการดูชื่อส่วนหัว HTTP ตามลำดับที่ได้รับ ให้ทำดังนี้

1. เปิดแท็บส่วนหัวสำหรับคำขอที่คุณสนใจ ดูดูส่วนหัว HTTP
2. คลิกดูแหล่งที่มาข้างส่วนส่วนหัวของคำขอหรือส่วนหัวของการตอบกลับ

คำเตือนเกี่ยวกับส่วนหัวชั่วคราว

บางครั้งแท็บส่วนหัวจะแสดงข้อความเตือน Provisional headers are shown... ซึ่งอาจเกิดจากสาเหตุต่อไปนี้

• คำขอไม่ได้ส่งผ่านเครือข่าย แต่แสดงจากแคชในเครื่อง ซึ่งไม่ได้จัดเก็บส่วนหัวของคำขอเดิมไว้ ในกรณีนี้ คุณสามารถปิดใช้แคชเพื่อดูส่วนหัวของคำขอแบบเต็มได้

• ทรัพยากรเครือข่ายไม่ถูกต้อง เช่น เรียกใช้ fetch("https://jec.fish.com/unknown-url/") ในคอนโซล

นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังแสดงได้เฉพาะส่วนหัวที่จัดสรรไว้เนื่องด้วยเหตุผลด้านความปลอดภัย

ดูเพย์โหลดคำขอ

หากต้องการดูเพย์โหลดของคำขอ ซึ่งก็คือพารามิเตอร์สตริงคำค้นหาและข้อมูลแบบฟอร์ม ให้เลือกคำขอจากตารางคำขอ แล้วเปิดแท็บเพย์โหลด

ดูแหล่งที่มาของเพย์โหลด

โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเพย์โหลดในรูปแบบที่มนุษย์อ่านได้

หากต้องการดูแหล่งที่มาของพารามิเตอร์สตริงการค้นหาและข้อมูลแบบฟอร์ม ให้คลิกดูแหล่งที่มาข้างส่วนพารามิเตอร์สตริงการค้นหาหรือข้อมูลแบบฟอร์มในแท็บเพย์โหลด

ดูอาร์กิวเมนต์ที่ถอดรหัส URL แล้วของพารามิเตอร์สตริงการค้นหา

หากต้องการเปิด/ปิดการเข้ารหัส URL สำหรับอาร์กิวเมนต์ ให้คลิกดูที่ถอดรหัสแล้วหรือดูที่เข้ารหัส URL ในแท็บเพย์โหลด

ดูคุกกี้

วิธีดูคุกกี้ที่ส่งในส่วนหัว HTTP ของคำขอ

1. เลือกคำขอในคอลัมน์ชื่อในตารางคำขอ
2. เปิดแท็บ Cookies

ดูคำอธิบายของแต่ละคอลัมน์ได้ที่ฟิลด์

หากต้องการแก้ไขคุกกี้ โปรดดูดู แก้ไข และลบคุกกี้

ดูเซสชันที่ผูกกับอุปกรณ์

แท็บเซสชันที่เชื่อมโยงกับอุปกรณ์จะแสดงข้อมูลการเลื่อน (รีเฟรช) ที่เชื่อมโยงกับคำขอที่เลือกสำหรับเซสชันที่เชื่อมโยงกับอุปกรณ์ที่ใช้งานอยู่ทั้งหมดในเว็บไซต์

วิธีดูข้อมูลการเลื่อน (รีเฟรช)

1. เลือกคำขอในคอลัมน์ชื่อในตารางคำขอ
2. เปิดแท็บเซสชันที่ผูกกับอุปกรณ์

แท็บเซสชันที่เชื่อมโยงกับอุปกรณ์จะแสดงเฉพาะคำขอที่เกี่ยวข้องซึ่งมีคุกกี้ แท็บจะแสดงเซสชันที่เชื่อมโยงกับอุปกรณ์ที่ใช้งานอยู่ทั้งหมด และแสดงว่าเซสชันเลื่อนคำขอหรือไม่ (และหากไม่เลื่อน ก็จะแสดงเหตุผล) ตัวเลือกการเลื่อนเวลาที่เป็นไปได้มีดังนี้

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

ดูรายละเอียดเวลาของคำขอ

วิธีดูรายละเอียดเวลาของคำขอ

1. เลือกคำขอในคอลัมน์ชื่อในตารางคำขอ
2. เปิดแท็บช่วงเวลา

ดูดูตัวอย่างรายละเอียดเวลาเพื่อดูวิธีเข้าถึงข้อมูลนี้ได้เร็วขึ้น

ดูข้อมูลเพิ่มเติมเกี่ยวกับแต่ละเฟสที่คุณอาจเห็นในแท็บเวลาได้ที่อธิบายเฟสการแบ่งเวลา

ดูตัวอย่างรายละเอียดเวลา

หากต้องการดูตัวอย่างการแบ่งเวลาของคำขอ ให้วางเมาส์เหนือรายการคำขอในคอลัมน์น้ำตกของตารางคำขอ

ดูดูรายละเอียดเวลาของคำขอเพื่อดูวิธีเข้าถึงข้อมูลนี้โดยไม่ต้องวางเมาส์

อธิบายระยะต่างๆ ของการวิเคราะห์ระยะเวลา

ดูข้อมูลเพิ่มเติมเกี่ยวกับแต่ละระยะที่คุณอาจเห็นในแท็บช่วงเวลาได้ที่นี่

• การจัดคิว เบราว์เซอร์จะจัดคิวคำขอก่อนที่การเชื่อมต่อจะเริ่มขึ้นและเมื่อมีเงื่อนไขต่อไปนี้
  • มีคำขอที่มีลำดับความสำคัญสูงกว่า ลำดับความสำคัญของคำขอจะพิจารณาจากปัจจัยต่างๆ เช่น ประเภทของทรัพยากร รวมถึงตำแหน่งของทรัพยากรภายในเอกสาร ดูข้อมูลเพิ่มเติมได้ที่ส่วนลำดับความสำคัญของทรัพยากรในคำแนะนำของ fetchpriority
  • มีการเชื่อมต่อ TCP เปิดอยู่แล้ว 6 รายการสำหรับต้นทางนี้ ซึ่งเป็นขีดจำกัด (ใช้กับ HTTP/1.0 และ HTTP/1.1 เท่านั้น)
  • เบราว์เซอร์กำลังจัดสรรพื้นที่ในแคชดิสก์เป็นเวลาสั้นๆ
• หยุดชะงัก คำขออาจหยุดชะงักหลังจากเริ่มการเชื่อมต่อด้วยเหตุผลใดก็ตามที่อธิบายไว้ในการจัดคิว
• การค้นหา DNS เบราว์เซอร์กำลังแก้ไขที่อยู่ IP ของคำขอ
• การเชื่อมต่อครั้งแรก เบราว์เซอร์กำลังสร้างการเชื่อมต่อ ซึ่งรวมถึงแฮนด์เชค TCP หรือการลองอีกครั้ง และการเจรจา SSL
• การเจรจาพร็อกซี เบราว์เซอร์กำลังเจรจาคำขอกับพร็อกซีเซิร์ฟเวอร์
• ส่งคำขอแล้ว กำลังส่งคำขอ
• การเตรียม Service Worker เบราว์เซอร์กำลังเริ่มต้น Service Worker
• คำขอไปยัง ServiceWorker ระบบกำลังส่งคำขอไปยัง Service Worker
• กำลังรอ (TTFB) เบราว์เซอร์กำลังรอไบต์แรกของการตอบกลับ TTFB ย่อมาจาก Time To First Byte การจับเวลานี้รวมถึงเวลาในการตอบสนองแบบไปกลับ 1 รอบและเวลาที่เซิร์ฟเวอร์ใช้ในการ เตรียมการตอบสนอง
• การดาวน์โหลดเนื้อหา เบราว์เซอร์ได้รับการตอบกลับ ไม่ว่าจะจากเครือข่ายโดยตรงหรือจาก Service Worker ค่านี้คือระยะเวลาทั้งหมดที่ใช้ในการอ่านเนื้อหาการตอบกลับ ค่าที่สูงกว่าที่คาดไว้แสดงว่าเครือข่ายช้า หรือเบราว์เซอร์กำลังทำงานอื่นๆ อยู่ ซึ่งทำให้การอ่านการตอบสนองล่าช้า

ดูผู้เริ่มและทรัพยากร Dependency

หากต้องการดูผู้เริ่มต้นและทรัพยากร Dependency ของคำขอ ให้กด Shift ค้างไว้แล้ววางเมาส์เหนือคำขอในตารางคำขอ เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์ผู้เริ่มต้นเป็นสีเขียวและไฮไลต์ทรัพยากร Dependency เป็นสีแดง

เมื่อตารางคำขอเรียงตามลำดับเวลา คำขอสีเขียวแรกเหนือคำขอที่คุณวางเมาส์ คือผู้เริ่มต้นการอ้างอิง หากมีคำขอสีเขียวอีกรายการอยู่เหนือคำขอสีเขียวที่แสดงอยู่ คำขอที่สูงกว่านั้นจะเป็นผู้เริ่มต้นของผู้เริ่มต้น เป็นต้น

ดูเหตุการณ์การโหลด

DevTools จะแสดงเวลาของเหตุการณ์ DOMContentLoaded และ load ในหลายที่ในแผงเครือข่าย เหตุการณ์ DOMContentLoaded มีสีน้ำเงิน และเหตุการณ์ load มีสีแดง

ดูจำนวนคำขอทั้งหมด

จำนวนคำขอทั้งหมดจะแสดงในแถบสถานะที่ด้านล่างของแผงเครือข่าย

ข้อควรระวัง: ข้อควรระวัง: ตัวเลขนี้จะติดตามเฉพาะคำขอที่บันทึกไว้ตั้งแต่เปิดเครื่องมือสำหรับนักพัฒนาเว็บ หากมีคำขออื่นๆ เกิดขึ้นก่อนที่จะเปิดเครื่องมือสำหรับนักพัฒนาเว็บ ระบบจะไม่นับคำขอเหล่านั้น

ดูขนาดรวมของทรัพยากรที่โอนและโหลด

DevTools แสดงขนาดรวมของทรัพยากรที่โอนและโหลด (ไม่ได้บีบอัด) ในแถบสถานะที่ด้านล่างของแผงเครือข่าย

ข้อควรระวัง: ข้อควรระวัง: ตัวเลขนี้จะติดตามเฉพาะคำขอที่บันทึกไว้ตั้งแต่เปิดเครื่องมือสำหรับนักพัฒนาเว็บ หากมีคำขออื่นๆ เกิดขึ้นก่อนที่จะเปิดเครื่องมือสำหรับนักพัฒนาเว็บ ระบบจะไม่นับคำขอเหล่านั้น

ดูดูขนาดที่ไม่ได้บีบอัดของทรัพยากรเพื่อดูว่าทรัพยากรมีขนาดเท่าใดหลังจากที่เบราว์เซอร์ยกเลิกการบีบอัด

ดูสแต็กเทรซที่ทำให้เกิดคำขอ

เมื่อคำสั่ง JavaScript ทำให้มีการขอทรัพยากร ให้วางเมาส์เหนือคอลัมน์ผู้เริ่ม เพื่อดูสแต็กเทรซที่นำไปสู่คำขอ

ดูขนาดที่ไม่ได้บีบอัดของทรัพยากร

ตรวจสอบการตั้งค่า > แถวคำขอขนาดใหญ่ แล้วดูค่าล่างสุดของคอลัมน์ขนาด

ในตัวอย่างนี้ ขนาดที่บีบอัดของwww.google.comเอกสารที่ส่งผ่านเครือข่ายคือ43.8 KB ส่วนขนาดที่ไม่ได้บีบอัดคือ 136 KB

ส่งออกข้อมูลคำขอ

คุณส่งออกหรือคัดลอกรายการคำขอโดยใช้ตัวกรองได้หลายวิธีตามที่อธิบายไว้ถัดไป

บันทึกคำขอเครือข่ายทั้งหมดลงในไฟล์ HAR

HAR (HTTP Archive) คือรูปแบบไฟล์ที่เครื่องมือเซสชัน HTTP หลายรายการใช้ส่งออกข้อมูลที่บันทึก โดยปกติจะมีรูปแบบเป็นออบเจ็กต์ JSON ซึ่งมีชุดช่องข้อมูลที่เจาะจง

หากต้องการลดโอกาสที่ข้อมูลที่ละเอียดอ่อนจะรั่วไหลโดยไม่ตั้งใจ โดยค่าเริ่มต้น คุณจะส่งออกบันทึกเครือข่ายที่ "ตรวจสอบความถูกต้อง" ในรูปแบบ HAR ได้ ซึ่งจะไม่รวมข้อมูลที่ละเอียดอ่อน เช่น ส่วนหัว Cookie, Set-Cookie และ Authorization หากจำเป็น คุณยังส่งออกบันทึกพร้อมข้อมูลที่ละเอียดอ่อนได้ด้วย

หากต้องการบันทึกคำขอเครือข่ายทั้งหมดลงในไฟล์ HAR ให้เลือกวิธีใดวิธีหนึ่งต่อไปนี้

• คลิกขวาที่คำขอในตารางคำขอ แล้วเลือกคัดลอก > บันทึก [รายการ] ทั้งหมดเป็น HAR (ล้างข้อมูล) หรือบันทึก [รายการ] ทั้งหมดเป็น HAR (มีข้อมูลที่ละเอียดอ่อน)

  

• คลิกดาวน์โหลด ส่งออก HAR (ล้างข้อมูลแล้ว)... ในแถบการดำเนินการที่ด้านบนของแผงเครือข่าย

  หากต้องการส่งออกพร้อมข้อมูลที่ละเอียดอ่อน ให้เปิดการตั้งค่าก่อน การตั้งค่า > ค่ากำหนด > เครือข่าย > check_box อนุญาตให้สร้าง HAR ที่มีข้อมูลที่ละเอียดอ่อน จากนั้นคลิกปุ่มดาวน์โหลด ส่งออก แล้วเลือกส่งออก HAR (พร้อมข้อมูลที่ละเอียดอ่อน) จากเมนูแบบเลื่อนลง

  

เมื่อมีไฟล์ HAR แล้ว คุณจะนำเข้าไฟล์กลับไปที่ DevTools เพื่อวิเคราะห์ได้ 2 วิธี ดังนี้

• ลากและวางไฟล์ HAR ลงในตารางคำขอ
• คลิกอัปโหลด นำเข้า HAR ในแถบการดำเนินการที่ด้านบนของแผงเครือข่าย

หมายเหตุ: แผงเครือข่ายจะอ่านและแสดงผู้เริ่มต้นสำหรับคำขอที่นำเข้าจากไฟล์ HAR

คัดลอกคำขอ ชุดคำขอที่กรองแล้ว หรือคำขอทั้งหมดไปยังคลิปบอร์ด

ในคอลัมน์ชื่อของตารางคำขอ ให้คลิกขวาที่คำขอ วางเมาส์เหนือคัดลอก แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

หากต้องการคัดลอกคำขอเดียว คำตอบ หรือสแต็กเทรซ ให้ทำดังนี้

• คัดลอก URL คัดลอก URL ของคำขอไปยังคลิปบอร์ด
• คัดลอกเป็น cURL คัดลอกคำขอเป็นคำสั่ง cURL
• คัดลอกเป็น PowerShell คัดลอกคำขอเป็นคำสั่ง PowerShell
• คัดลอกเป็นการดึงข้อมูล คัดลอกคำขอเป็นการเรียกใช้การดึงข้อมูล
• คัดลอกเป็น Fetch (Node.js) คัดลอกคำขอเป็นการเรียกใช้ Node.js Fetch
• คัดลอกคำตอบ คัดลอกเนื้อหาการตอบกลับไปยังคลิปบอร์ด
• คัดลอกสแต็กเทรซ คัดลอกสแต็กเทรซของคำขอไปยังคลิปบอร์ด

วิธีคัดลอกคำขอทั้งหมด

• คัดลอก URL ทั้งหมด คัดลอก URL ของคำขอทั้งหมดไปยังคลิปบอร์ด
• คัดลอกทั้งหมดเป็น cURL คัดลอกคำขอทั้งหมดเป็นชุดคำสั่ง cURL
• คัดลอกทั้งหมดเป็น PowerShell คัดลอกคำขอทั้งหมดเป็นเชนของคำสั่ง PowerShell
• คัดลอกทั้งหมดเป็นการดึงข้อมูล คัดลอกคำขอทั้งหมดเป็นเชนของการเรียกใช้ Fetch
• คัดลอกทั้งหมดเป็นการดึงข้อมูล (Node.js) คัดลอกคำขอทั้งหมดเป็นห่วงโซ่ของการเรียกใช้ฟังก์ชัน Fetch ของ Node.js
• คัดลอกทั้งหมดเป็น HAR (ตรวจสอบความถูกต้องแล้ว) คัดลอกคำขอทั้งหมดเป็นข้อมูล HAR โดยไม่มีข้อมูลที่ละเอียดอ่อน เช่น ส่วนหัว Cookie, Set-Cookie และ Authorization
• คัดลอกทั้งหมดเป็น HAR (พร้อมข้อมูลที่ละเอียดอ่อน) คัดลอกคำขอทั้งหมดเป็นข้อมูล HAR พร้อมข้อมูลที่ละเอียดอ่อน

หากต้องการคัดลอกชุดคำขอที่กรองแล้ว ให้ใช้ตัวกรองกับบันทึกเครือข่าย คลิกขวาที่คำขอ แล้วเลือกตัวเลือกต่อไปนี้

• คัดลอก URL ที่แสดงทั้งหมด คัดลอก URL ของคำขอที่กรองทั้งหมดไปยังคลิปบอร์ด
• คัดลอกรายการทั้งหมดที่แสดงเป็น cURL คัดลอกคำขอที่กรองแล้วทั้งหมดเป็นเชนของคำสั่ง cURL
• คัดลอกรายการทั้งหมดที่แสดงเป็น PowerShell คัดลอกคำขอที่กรองทั้งหมดเป็นเชนของคำสั่ง PowerShell
• คัดลอกรายการทั้งหมดเป็นการดึงข้อมูล คัดลอกคำขอที่กรองแล้วทั้งหมดเป็นเชนของการเรียกใช้ Fetch
• คัดลอกรายการทั้งหมดที่แสดงเป็นการดึงข้อมูล (Node.js) คัดลอกคำขอที่กรองแล้วทั้งหมดเป็นเชนของการเรียกใช้ฟังก์ชัน Fetch ของ Node.js
• คัดลอกรายการทั้งหมดที่แสดงเป็น HAR (ตรวจสอบความถูกต้องแล้ว) คัดลอกคำขอที่กรองแล้วทั้งหมดเป็นข้อมูล HAR โดยไม่มีข้อมูลที่ละเอียดอ่อน เช่น ส่วนหัว Cookie, Set-Cookie และ Authorization
• คัดลอกรายการทั้งหมดที่แสดงเป็น HAR (พร้อมข้อมูลที่ละเอียดอ่อน) คัดลอกคำขอที่กรองแล้วทั้งหมดเป็นข้อมูล HAR พร้อมข้อมูลที่ละเอียดอ่อน

เปลี่ยนเลย์เอาต์ของแผงเครือข่าย

ขยายหรือยุบส่วนต่างๆ ของ UI แผงเครือข่ายเพื่อมุ่งเน้นสิ่งที่สำคัญสำหรับคุณ

ซ่อนแถบการดำเนินการของตัวกรอง

โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแถบตัวกรองที่ด้านบนของแผงเครือข่าย คลิก filter_alt ตัวกรองเพื่อซ่อน

ใช้แถวคำขอขนาดใหญ่

ใช้แถวขนาดใหญ่เมื่อต้องการให้มีพื้นที่ว่างมากขึ้นในตารางคำขอเครือข่าย นอกจากนี้ บางคอลัมน์ยัง ให้ข้อมูลเพิ่มเติมเล็กน้อยเมื่อใช้แถวขนาดใหญ่ ตัวอย่างเช่น ค่าด้านล่างของคอลัมน์ขนาดคือขนาดที่ไม่ได้บีบอัดของคำขอ และคอลัมน์ลำดับความสำคัญจะแสดงทั้งลำดับความสำคัญในการดึงข้อมูลเริ่มต้น (ค่าด้านล่าง) และลำดับความสำคัญในการดึงข้อมูลสุดท้าย (ค่าด้านบน)

เปิดการตั้งค่า แล้วคลิกแถวคำขอขนาดใหญ่เพื่อดูแถวขนาดใหญ่

ซ่อนแทร็กภาพรวม

โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแทร็กภาพรวม เปิดการตั้งค่า แล้วล้างช่องทำเครื่องหมายแสดงภาพรวมเพื่อซ่อน