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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

   

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

   

   คุณอาจต้องการยึด DevTools ไว้ที่ด้านล่างของหน้าต่าง

   

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

   

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

   

2. เลือก 3G

   

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

   

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

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

   

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

   

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

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

   

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

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

   

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

   

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

   

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

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

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

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

   

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 ในกล่องข้อความตัวกรอง DevTools จะกรองทรัพยากรที่มี 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 ที่เกี่ยวข้องกับการตรวจสอบกิจกรรมบนเครือข่าย โปรดดูข้อมูลอ้างอิงเครือข่าย