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

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

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

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

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

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

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

ล้างคำขอ

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

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

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

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

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

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

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

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

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

แก้ไขและส่งคำขออีกครั้ง

คุณสามารถแก้ไขและส่งคำขอเครือข่ายที่ดึงข้อมูลได้อีกครั้งจากตารางคำขอ โดยทำดังนี้

1. คลิกขวาที่คำขอแล้วเลือกแก้ไขและส่งอีกครั้งเป็นดึงข้อมูล เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดลิ้นชักคอนโซลพร้อมคำขอที่ป้อนเป็นคำสั่งเรียก fetch() โดยจะเก็บพารามิเตอร์คำขอเดิมและบริบทการดำเนินการไว้
2. หรือจะแก้ไขfetch()การเรียกใช้ในคอนโซลก็ได้ จากนั้นกด Enter เพื่อส่งคำขออีกครั้ง

เปลี่ยนลักษณะการโหลด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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. คลิกผลการค้นหารายการใดรายการหนึ่ง แผงเครือข่ายจะไฮไลต์คำขอที่ตรงกันเป็นสีเหลือง นอกจากนี้ แผงยังเปิดแท็บส่วนหัวหรือการตอบกลับ และไฮไลต์สตริงที่ตรงกันด้วย (หากมี)

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

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

คำขอกรอง

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

ใช้ช่องตัวกรองเพื่อกรองคำขอตามพร็อพเพอร์ตี้ เช่น โดเมนหรือขนาดของคำขอ หรือป้อนสตริงข้อความเพื่อให้ตรงกับ URL ของคำขอ โดเมน ชื่อโฮสต์ หรือพอร์ต (เช่น localhost หรือ example.com) รวมถึงคำขอแบบเดียวกัน

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

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

คุณใช้พร็อพเพอร์ตี้หลายรายการพร้อมกันได้โดยคั่นแต่ละพร็อพเพอร์ตี้ด้วยการเว้นวรรค เช่น 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 ตรงกับค่าที่ระบุ

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

หากต้องการกรองคำขอตามประเภททรัพยากร ให้คลิกปุ่มทั้งหมด, ดึงข้อมูล/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 แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูเวลาของคำขอที่เกี่ยวข้อง

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

ดูจัดเรียงตามระยะของกิจกรรมเพื่อดูวิธีต่างๆ ในการจัดเรียงแผนภูมิ Waterfall

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

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

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

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

ตารางประกอบด้วย 3 คอลัมน์ดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

ดูเนื้อหาคำตอบ

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

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

สำหรับคำตอบแบบไบนารีหรือแบบบีบอัด ให้เลือกวิธีการถอดรหัส (Base64, Hex หรือ UTF-8) จากเมนูแบบเลื่อนลงที่ด้านล่างของแท็บคำตอบ

ดูส่วนหัว HTTP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูเพย์โหลดแบบไบนารีและแบบบีบอัด

สำหรับเพย์โหลดคำขอแบบไบนารีหรือแบบบีบอัด ให้เลือกวิธีการถอดรหัส (Base64, Hex หรือ UTF-8) จากเมนูแบบเลื่อนลงที่ด้านล่างของแท็บเพย์โหลด

ดูคุกกี้

วิธีดูคุกกี้ที่ส่งในส่วนหัว 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. เปิดแท็บช่วงเวลา

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

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

ดูตัวอย่างรายละเอียดการกำหนดเวลา

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

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

อธิบายระยะการวิเคราะห์เวลา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

  

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

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

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

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

วิธีคัดลอกคำขอเดียว การตอบกลับ หรือสแต็กเทรซ

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

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

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

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

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

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

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

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

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

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

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

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

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

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