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

Kayce Basques

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

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

อ่านต่อ หรือดูวิดีโอบทแนะนำนี้:

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

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

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

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

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

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

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

   

   รูปที่ 1 เดโม

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

   

   รูปที่ 2 การสาธิตในหน้าต่างเดียวและบทแนะนำนี้ในอีกหน้าต่าง

2. เปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยกด Control+Shift+J หรือ Command+Option+J (Mac) แผงคอนโซลจะเปิดขึ้นมา

   

   รูปที่ 3 คอนโซล

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

   

   รูปที่ 4 ตรึงเครื่องมือสำหรับนักพัฒนาเว็บไว้ที่ด้านล่างของหน้าต่าง

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

   

   รูปที่ 5 ตรึงเครื่องมือสำหรับนักพัฒนาเว็บไว้ที่ด้านล่างของหน้าต่าง

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

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

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

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

   

   รูปที่ 6 บันทึกเครือข่าย

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

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

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

   • Waterfall ภาพกราฟิกของขั้นตอนต่างๆ ของคำขอ วางเมาส์เหนือน้ำตกเพื่อดูรายละเอียด

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

3. จากนั้นคลิกปุ่มรับข้อมูลในการสาธิต

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

   

   รูปที่ 7 ทรัพยากรใหม่ในบันทึกเครือข่าย

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

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

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

   

   รูปที่ 8 การเปิดใช้คอลัมน์โดเมน

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

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

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

   

   รูปที่ 9 กำลังเปิดใช้การควบคุม

2. เลือก 3G ช้า

   

   รูปที่ 10 การเลือก 3G ที่ช้า

3. กด Reload ค้างไว้แล้วเลือก Empty Cache และ Hard Reload

   

   รูปที่ 11 ล้างแคชและโหลดซ้ำแบบดึงข้อมูลใหม่ทั้งหมด

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

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

ภาพหน้าจอช่วยให้คุณเห็นลักษณะของหน้าเว็บเมื่อเวลาผ่านไปขณะที่กําลังโหลด

1. คลิกจับภาพหน้าจอ

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

   

   รูปที่ 12 ภาพหน้าจอของการโหลดหน้าเว็บ

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

   

   รูปที่ 13 กิจกรรมในเครือข่ายที่เกิดขึ้นระหว่างภาพหน้าจอแรก

4. คลิกจับภาพหน้าจอ อีกครั้งเพื่อปิดแผงภาพหน้าจอ

5. โหลดหน้านี้ซ้ำ

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

คลิกแหล่งข้อมูลเพื่อดูข้อมูลเพิ่มเติม ลองเลย

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

   

   รูปที่ 14 แท็บส่วนหัว

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

   

   รูปที่ 15 แท็บแสดงตัวอย่าง

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

3. คลิกแท็บการตอบกลับ ซอร์สโค้ด HTML แสดงขึ้น

   

   รูปที่ 16 แท็บการตอบกลับ

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

   

   รูปที่ 17 แท็บระยะเวลา

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

   

   รูปที่ 18 ปุ่มปิด

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

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

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

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

   

   รูปที่ 19 แผงการค้นหา

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

   

   รูปที่ 20 ผลการค้นหาสำหรับ Cache-Control

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

   

   รูปที่ 21 ผลการค้นหาที่มีการไฮไลต์ในแท็บส่วนหัว

4. ปิดแผงการค้นหาและแท็บระยะเวลา

   

   รูปที่ 22 ปุ่มปิด

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

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

รูปที่ 23 แถบเครื่องมือตัวกรอง

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

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

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

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

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

   

   รูปที่ 24 ตัวกรองสตริง

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

   

   รูปที่ 25 ตัวกรองนิพจน์ทั่วไป

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

   

   รูปที่ 26 ตัวกรองเนกาทีฟ

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

   

   รูปที่ 27 ตัวกรองพร็อพเพอร์ตี้

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

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

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

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

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

   

   รูปที่ 28 แสดงเฉพาะไฟล์ CSS

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

   

   รูปที่ 29 แสดงเฉพาะไฟล์ CSS และ JS

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

โปรดดูกรองคำขอสำหรับเวิร์กโฟลว์การกรองอื่นๆ

บล็อกคำขอ

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

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

   

   รูปที่ 30 เมนูคำสั่ง

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

   

   รูปที่ 31 แสดงการบล็อกคำขอ

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

4. พิมพ์ main.css

   

   รูปที่ 32 กำลังบล็อก main.css

5. คลิกเพิ่ม

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

   

   รูปที่ 33 บล็อก main.css แล้ว

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

ขั้นตอนถัดไป

ยินดีด้วย คุณดูบทแนะนำจบแล้ว คลิกจ่ายรางวัลเพื่อรับรางวัล

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