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

Kayce Basques

Sofia Emelianova

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

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

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

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

หากต้องการหยุดบันทึกคำขอ ให้ทำดังนี้

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

ล้างคำขอ

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

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

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

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

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

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

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

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

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

เล่นคำขอ XHR อีกครั้ง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากต้องการจำลอง 3G ที่ช้า, 3G ที่เร็ว และความเร็วในการเชื่อมต่ออื่นๆ ให้เลือกตัวเลือกที่เกี่ยวข้องจากเมนูการควบคุม

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

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

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

1. เปิดเมนู Throttling แล้วเลือก Custom > Add...
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 จากเมนู หรือป้อนตัวเลือกที่กำหนดเองในช่อง

กรองคำขอ

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

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

หากคุณไม่เห็นช่องนี้ แสดงว่าแผงตัวกรองอาจซ่อนอยู่ โปรดดูหัวข้อซ่อนแผงตัวกรอง

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

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

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

• cookie-domain แสดงทรัพยากรที่ตั้งค่าโดเมนคุกกี้ที่เฉพาะเจาะจง
• cookie-name แสดงทรัพยากรที่กำหนดชื่อคุกกี้ที่เฉพาะเจาะจง
• cookie-path แสดงทรัพยากรที่ตั้งค่าเส้นทางคุกกี้ที่เฉพาะเจาะจง
• cookie-value แสดงทรัพยากรที่กำหนดค่าคุกกี้ที่เฉพาะเจาะจง
• domain แสดงเฉพาะทรัพยากรจากโดเมนที่ระบุ คุณใช้อักขระไวลด์การ์ด (*) เพื่อรวมหลายโดเมนได้ ตัวอย่างเช่น *.com จะแสดงทรัพยากรจากชื่อโดเมนทั้งหมดที่ลงท้ายด้วย .com เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเมนูแบบเลื่อนลงที่เติมข้อความอัตโนมัติพร้อมโดเมนทั้งหมดที่พบ
• 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 ตรงกับรหัสที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะสร้างเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติพร้อมรหัสสถานะทั้งหมดที่พบ
• url แสดงทรัพยากรที่มี url ตรงกับค่าที่ระบุ

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

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

หากคุณไม่เห็นปุ่มเหล่านี้ อาจเป็นไปได้ว่าบานหน้าต่างตัวกรองซ่อนอยู่ ดูหัวข้อซ่อนแผงตัวกรอง

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

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

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

ซ่อน URL ข้อมูล

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

หากต้องการซ่อนคำขอเหล่านี้ ให้เลือก ซ่อน URL ของข้อมูล

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

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

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

หากต้องการซ่อนคำขอส่วนขยาย ให้เลือก ซ่อน URL ส่วนขยาย

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

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

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

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

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

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

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

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

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

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

หากต้องการกรองทุกอย่างยกเว้นคำขอที่มีต้นทางซึ่งต่างจากต้นทางของหน้า ให้เลือกคำขอของบุคคลที่สาม ลองใช้งานในหน้าสาธิตนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

• Waterfall รายละเอียดแบบภาพสำหรับกิจกรรมของแต่ละคำขอ

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

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

คุณสามารถเพิ่มหรือนำคอลัมน์เพิ่มเติมต่อไปนี้ออก ได้แก่ เส้นทาง, URL, เมธอด, โปรโตคอล, รูปแบบ, โดเมน, ที่อยู่ระยะไกล, พื้นที่ของที่อยู่ระยะไกล, พื้นที่ที่อยู่ของตัวเริ่มต้น, คุกกี้, ตั้งค่าคุกกี้, ลำดับความสำคัญ, รหัสการเชื่อมต่อ และ มีการแทนที่

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

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

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

จัดกลุ่มคำขอตามเฟรมในบรรทัด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูตัวอย่างเนื้อหาคำตอบ

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

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

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

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

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

1. คลิก URL ของคำขอในคอลัมน์ชื่อของตารางคำขอ
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. คลิก URL ของคำขอในคอลัมน์ชื่อของตารางคำขอ
2. คลิกแท็บคุกกี้

โปรดดูคำอธิบายของแต่ละคอลัมน์ที่ช่อง

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

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

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

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

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

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

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

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

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

อธิบายระยะของรายละเอียดระยะเวลา

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

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

ดูผู้เริ่มต้นและการอ้างอิง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คัดลอกคำขออย่างน้อย 1 รายการไปยังคลิปบอร์ด

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

• คัดลอก URL คัดลอก URL ของคำขอไปยังคลิปบอร์ด
• คัดลอกเป็น cURL คัดลอกคำขอเป็นคำสั่ง cURL
• คัดลอกเป็น PowerShell คัดลอกคำขอเป็นคำสั่ง PowerShell
• คัดลอกเป็นการดึงข้อมูล คัดลอกคำขอเป็นการเรียกแบบดึงข้อมูล

• คัดลอกเป็นการดึงข้อมูล Node.js คัดลอกคำขอเป็นการเรียก Node.js

  ---

• คัดลอกคำตอบ คัดลอกเนื้อหาคำตอบไปยังคลิปบอร์ด

  ---

• คัดลอก URL ทั้งหมด คัดลอก URL ของคำขอทั้งหมดไปยังคลิปบอร์ด

• คัดลอกทั้งหมดเป็น cURL คัดลอกคำขอทั้งหมดเป็นเชนของคำสั่ง cURL

• คัดลอกทั้งหมดเป็น PowerShell คัดลอกคำขอทั้งหมดเป็นชุดคำสั่ง PowerShell

• คัดลอกทั้งหมดเป็นการดึงข้อมูล คัดลอกคำขอทั้งหมดเป็นเชนการเรียกใช้การดึงข้อมูล

• คัดลอกทั้งหมดเป็นการดึงข้อมูล Node.js คัดลอกคำขอทั้งหมดเป็นเชนการเรียกใช้ Node.js

• คัดลอกทั้งหมดเป็น HAR คัดลอกคำขอทั้งหมดเป็นข้อมูล HAR

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

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

ซ่อนแผงตัวกรอง

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

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

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

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

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

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