สำรวจแผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บ

Jeff Posnick

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

ไปที่แผงเครือข่าย

ไปที่แผงเครือข่ายเพื่อดูการจราจรของข้อมูลในเครือข่ายของการสาธิต แอปพลิเคชัน

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ

3. คลิกแท็บเครือข่าย

4. โหลดหน้านี้ซ้ำเพื่อดูการจราจรของข้อมูลในเครือข่าย

แผงเครือข่ายแสดงชิ้นงานทั้งหมดที่โหลดไว้เนื่องจากเริ่มต้น การนำทาง:

วิธีตีความรายการ

การจราจรของข้อมูลในเครือข่ายที่บันทึกไว้แต่ละแถวจะแสดงคำขอและการตอบกลับรายการเดียว คู่กัน

แถวแรกที่เป็นประเภท document เป็นคำขอการนำทางเริ่มต้นสำหรับฟังก์ชัน HTML ของเว็บแอป นี่เป็นแหล่งที่มาของการแสดงวิดีโอตามลำดับขั้น แต่ละรายการต่อๆ ไป ขั้นตอนสำหรับเนื้อหาเพิ่มเติม (หรือที่เรียกว่าทรัพยากรย่อยของเอกสารหลัก) จากแหล่งที่มาดั้งเดิมนี้

แถวที่ 2 และ 3 แสดง CSS stylesheet และทรัพยากรย่อย script กำลังโหลด เป็นคำขอที่เกี่ยวข้องซึ่งเริ่มต้นโดยเอกสารหลัก

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

เมื่อพิจารณารวมกันแล้ว คำขอสำหรับเอกสาร HTML, CSS และ จำเป็นต้องใช้ JavaScript เพื่อแสดงหน้าแบบเต็มระหว่าง การนำทางเบื้องต้น

สร้างคำขอรันไทม์เพิ่มเติม

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

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

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

ตีความรายการใหม่

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

แถวแรกของรายการใหม่จะแสดงคำขอที่มีประเภทเป็น fetch ซึ่งสอดคล้องกับ วิธีที่เว็บแอปขอข้อมูล จาก Wikipedia API

แถวต่อไปนี้คือรูปภาพ (png หรือ jpeg) ที่เชื่อมโยงกับ ข้อมูล Wikipedia แม้ว่าจะดูได้ยากจากภาพหน้าจอ แต่ รายการในคอลัมน์ Waterfall จะส่งมาจากการตอบกลับของ API โดยตรง

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

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

สรุปข้อมูล

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

แผงเครือข่ายจะช่วยตอบคำถามว่าระบบกำลังโหลดอะไรอยู่ ผ่านทาง URL ในคอลัมน์ "ชื่อ" และข้อมูลในคอลัมน์ "ประเภท" รวมถึงเมื่อ กําลังโหลดผ่านการแสดง Waterfall

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

1. คำขอเบื้องต้น ซึ่งจะสร้างขึ้นทันทีหลังจากไปยังหน้าใหม่สำหรับฟิลด์ HTML, JavaScript, CSS (และองค์ประกอบอื่นๆ ที่เป็นไปได้)
2. คำขอรันไทม์ซึ่งเป็นผลมาจากการโต้ตอบของผู้ใช้กับหน้าเว็บ ช่วงเวลานี้ มักเริ่มต้นด้วยคำขอ ไปยัง API แล้วเข้าสู่ คำขอติดตามผลตามข้อมูล API ที่ดึงมา