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

Kayce Basques

Twitter GitHub กลิทช์

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

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

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

ควรใช้แผงเครือข่ายเมื่อใด

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

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

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

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

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

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

   

   รูปที่ 1 การสาธิต

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

   

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

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

   

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

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

   

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

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

   

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

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

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

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

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

   

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

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

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

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

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

     หมายเหตุ: หมายเหตุ กราฟเหนือบันทึกเครือข่ายจะเรียกว่าภาพรวม คุณจะไม่ใช้วิดีโอในบทแนะนำนี้ แต่จะซ่อนได้หากต้องการ ดู[ซ่อนแผงภาพรวม][6]

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

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

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

   

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

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

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

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

   

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

หมายเหตุ: เคล็ดลับ คุณดู URL แบบเต็มของทรัพยากรได้โดยวางเมาส์เหนือเซลล์ของทรัพยากรในคอลัมน์ชื่อ

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

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

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

   

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

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

   

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

3. กด Reload ค้างไว้ จากนั้นเลือก Empty Cache And Hard Reload

   

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

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

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

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

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

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

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

   

   รูปที่ 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. ยกเลิกการเลือกช่องทำเครื่องหมายเปิดใช้การบล็อกคำขอ

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

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

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