ตรวจสอบกิจกรรมเครือข่าย

Kayce Basques

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

ดูข้อมูลอ้างอิงเครือข่ายหากต้องการเรียกดูฟีเจอร์แทน

อ่านต่อหรือดูวิดีโอเวอร์ชันของบทแนะนำนี้

กรณีที่ควรใช้แผงเครือข่าย

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

• ตรวจสอบว่ามีการอัปโหลดหรือดาวน์โหลดทรัพยากรจริง
• การตรวจสอบพร็อพเพอร์ตี้ของทรัพยากรแต่ละรายการ เช่น ส่วนหัว HTTP, เนื้อหา, ขนาด และอื่นๆ

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

เปิดแผงเครือข่าย

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

1. เปิดเดโมเริ่มต้นใช้งาน

   

   คุณอาจต้องการย้ายการสาธิตไปยังหน้าต่างอื่น

   

2. เปิด DevTools โดยกด Control+Shift+J หรือ Command+Option+J (Mac) แผงคอนโซลจะเปิดขึ้น

   

   คุณอาจต้องการเชื่อมต่อเครื่องมือสำหรับนักพัฒนาเว็บไว้ที่ด้านล่างของหน้าต่าง

   

3. คลิกแท็บเครือข่าย แผงเครือข่ายจะเปิดขึ้น

   

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

บันทึกกิจกรรมในเครือข่าย

วิธีดูกิจกรรมเครือข่ายที่หน้าเว็บก่อให้เกิด

1. โหลดหน้าซ้ำ แผงเครือข่ายจะบันทึกกิจกรรมทั้งหมดในเครือข่ายไว้ในบันทึกเครือข่าย

   

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

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

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

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

3. ตอนนี้ ให้คลิกปุ่มรับข้อมูลในเดโม

4. ดูที่ด้านล่างของบันทึกเครือข่ายอีกครั้ง มีทรัพยากรใหม่ชื่อ getstarted.json การคลิกปุ่มรับข้อมูลทำให้หน้าเว็บขอไฟล์นี้

   

แสดงข้อมูลเพิ่มเติม

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

1. คลิกขวาที่ส่วนหัวของตารางบันทึกเครือข่าย แล้วเลือกโดเมน ตอนนี้ระบบจะแสดงโดเมนของแต่ละ ทรัพยากรแล้ว

   

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

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

1. คลิกเมนูแบบเลื่อนลงการควบคุมอัตรา ซึ่งตั้งค่าเป็นไม่มีการควบคุมอัตราโดยค่าเริ่มต้น

   

2. เลือก 3G

   

3. กดโหลดซ้ำ รีเฟรชค้างไว้ แล้วเลือกล้างแคชและโหลดซ้ำแบบเต็ม

   

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

จับภาพหน้าจอ

ภาพหน้าจอจะบันทึกรูปลักษณ์ของหน้าเว็บในเวลาต่างๆ ขณะที่โหลด และรายงานว่ามีการโหลดทรัพยากรใดบ้างในแต่ละช่วงเวลา

หากต้องการถ่ายภาพหน้าจอ ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกการตั้งค่าเครือข่าย การตั้งค่า

2. เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอ check_box

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

   

4. คลิกภาพปกแรก DevTools จะแสดงกิจกรรมเครือข่ายที่เกิดขึ้นในขณะนั้น

   

5. สลับช่องทำเครื่องหมายภาพหน้าจอเพื่อปิดแท็บภาพหน้าจอ

6. โหลดหน้าเว็บซ้ำ

ตรวจสอบรายละเอียดของทรัพยากร

คลิกทรัพยากรเพื่อดูข้อมูลเพิ่มเติม ลองเลย

1. คลิก getstarted.html แท็บส่วนหัวจะแสดงขึ้น ใช้แท็บนี้เพื่อตรวจสอบส่วนหัว HTTP

   

2. คลิกแท็บดูตัวอย่างเพื่อดูการแสดงผล HTML พื้นฐาน

   

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

3. คลิกแท็บการตอบกลับเพื่อดูซอร์สโค้ด HTML

   

4. คลิกแท็บผู้เริ่มเพื่อดูแผนผังที่แมปเชนผู้เริ่มคำขอ

   

5. คลิกแท็บเวลาเพื่อดูรายละเอียดกิจกรรมเครือข่ายสำหรับทรัพยากรนี้

   

6. คลิกปิด close เพื่อดูบันทึกเครือข่ายอีกครั้ง

   

ส่วนหัวและการตอบกลับของเครือข่าย Search

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

เช่น สมมติว่าคุณต้องการตรวจสอบว่าทรัพยากรใช้นโยบายแคชที่สมเหตุสมผลหรือไม่

1. คลิกค้นหา search ในแถบการดำเนินการของแผง หรือกด Command + F (macOS) หรือ Control + F (Windows / Linux)

   แท็บค้นหาจะเปิดขึ้นทางด้านซ้ายของบันทึกเครือข่าย

   

2. พิมพ์ Cache-Control แล้วกด Enter แท็บค้นหาจะแสดงอินสแตนซ์ทั้งหมดของ Cache-Control ที่พบในส่วนหัวของทรัพยากรหรือเนื้อหา

   

3. คลิกผลการค้นหาเพื่อดู หากพบคำค้นหาในส่วนหัว แท็บส่วนหัวจะเปิดขึ้น หากพบคำค้นหาในเนื้อหา แท็บคำตอบจะเปิดขึ้น

   

4. ปิดแท็บค้นหาและแท็บส่วนหัว

   

กรองทรัพยากร

DevTools มีเวิร์กโฟลว์มากมายสำหรับการกรองทรัพยากรที่ไม่เกี่ยวข้องกับงานที่กำลังทำอยู่

แถบเครื่องมือตัวกรองควรเปิดใช้อยู่โดยค่าเริ่มต้น หากไม่

1. คลิกตัวกรอง filter_alt เพื่อแสดง

กรองตามสตริง นิพจน์ทั่วไป หรือพร็อพเพอร์ตี้

กล่องรับข้อมูลตัวกรองรองรับการกรองหลายประเภท

1. พิมพ์ png ในกล่องรับข้อมูลตัวกรอง ระบบจะแสดงเฉพาะไฟล์ที่มีข้อความ png ในกรณีนี้ ไฟล์ที่ตรงกับตัวกรองจะมีเพียงรูปภาพ PNG เท่านั้น

   

2. พิมพ์ /.*\.[cj]s+$/ DevTools จะกรองทรัพยากรที่มีชื่อไฟล์ซึ่งไม่ได้ลงท้ายด้วย j หรือ c ตามด้วยอักขระ s อย่างน้อย 1 ตัวออก

   

3. พิมพ์ -main.css เครื่องมือสำหรับนักพัฒนาเว็บจะกรอง main.css ออก หากมีไฟล์อื่นที่ตรงกับรูปแบบดังกล่าว ระบบจะกรองไฟล์เหล่านั้นออกด้วย

   

4. พิมพ์ domain:raw.githubusercontent.com ในกล่องข้อความตัวกรอง เครื่องมือสำหรับนักพัฒนาเว็บจะกรอง ทรัพยากรที่มี URL ไม่ตรงกับโดเมนนี้ออก

   

   ดูรายการพร็อพเพอร์ตี้ที่กรองได้ทั้งหมดที่กรองคำขอตามพร็อพเพอร์ตี้

5. ล้างข้อความในกล่องรับข้อมูลตัวกรอง

กรองตามประเภททรัพยากร

หากต้องการโฟกัสที่ไฟล์บางประเภท เช่น สไตล์ชีต ให้ทำดังนี้

1. คลิก CSS ระบบจะกรองไฟล์ประเภทอื่นๆ ทั้งหมดออก

   

2. หากต้องการดูสคริปต์ด้วย ให้กด Control หรือ Command (Mac) ค้างไว้ แล้วคลิก JS

   

3. คลิกทั้งหมดเพื่อนำตัวกรองออกและดูแหล่งข้อมูลทั้งหมดอีกครั้ง

ดูเวิร์กโฟลว์การกรองอื่นๆ ได้ที่กรองคำขอ

บล็อกคำขอ

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

1. กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง

   

2. พิมพ์ block เลือกแสดงการบล็อกคำขอ แล้วกด Enter

   

3. คลิกปุ่มเพิ่มรูปแบบ

4. พิมพ์ main.css

   

5. คลิกเพิ่ม

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

   

7. ล้างช่องทําเครื่องหมายเปิดใช้การบล็อกคําขอ

หากต้องการดูฟีเจอร์ DevTools เพิ่มเติมที่เกี่ยวข้องกับการตรวจสอบกิจกรรมเครือข่าย โปรดดูข้อมูลอ้างอิงเครือข่าย