Codelab นี้จะอธิบายขั้นตอนการตีความการรับส่งข้อมูลทั้งหมดในเครือข่ายสําหรับแอปพลิเคชันตัวอย่างที่ซับซ้อน เมื่อสิ้นสุดการฝึกอบรม คุณจะมีทักษะที่จําเป็นในการหาสิ่งที่เว็บแอปพลิเคชันของคุณโหลดอยู่ และเวลาที่ส่งคําขอแต่ละรายการ
ไปที่แผงเครือข่าย
ไปที่แผงเครือข่ายเพื่อดูการจราจรของข้อมูลในเครือข่ายสําหรับแอปพลิเคชันสาธิต
หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
คลิกแท็บเครือข่าย
โหลดหน้าซ้ำเพื่อดูการจราจรของข้อมูลในเครือข่าย
แผงเครือข่ายจะแสดงชิ้นงานทั้งหมดที่โหลดเนื่องจากการไปยังส่วนต่างๆ เบื้องต้นของคุณ
วิธีตีความรายการ
แต่ละแถวของการจราจรของข้อมูลในเครือข่ายที่บันทึกไว้แสดงถึงคู่คําขอและการตอบกลับรายการเดียว
แถวแรกที่มีประเภท document คือคำขอการนำทางเริ่มต้นสำหรับ HTML ของเว็บแอป ชิ้นงานนี้เป็นแหล่งที่มาของการแสดงโฆษณาสื่อกลางตามลำดับขั้น คำขอชิ้นงานเพิ่มเติม (เรียกว่าทรัพยากรย่อยของเอกสารหลัก) แต่ละรายการที่ตามมาจะมาจากแหล่งที่มาเดิมนี้
แถวที่ 2 และ 3 ที่แสดงการโหลดทรัพยากรย่อย stylesheet และ script ของ CSS คือคําขอแบบขึ้นต่อกันที่เอกสารหลักเป็นผู้เริ่ม
เมื่อดูเวลาที่ส่งคําขอเหล่านั้น แผนภาพ Waterfall แสดงให้เห็นว่าคำขอเหล่านั้นไม่ได้เริ่มขึ้นจนกว่าจะถึงช่วงท้ายสุดของกระบวนการตอบสนองต่อคำขอการนําทาง
เมื่อรวมกันแล้ว คําขอเอกสาร HTML, CSS และ JavaScript จําเป็นต่อการแสดงหน้าเว็บแบบเต็มระหว่างการนําทางครั้งแรก
สร้างคําขอรันไทม์เพิ่มเติม
เมื่อแผงเครือข่ายยังคงเปิดอยู่และบันทึกอยู่ ก็ถึงเวลาจำลองสิ่งที่พบได้ทั่วไปในเว็บแอปจำนวนมากแล้ว ซึ่งก็คือคําขอ API เพิ่มเติมที่ใช้เพื่อเพิ่มข้อมูลลงในหน้าเว็บหลังจากที่การนําทางครั้งแรกเสร็จสมบูรณ์
เรียกใช้คำขอเพิ่มเติมเหล่านี้โดยคลิกค้นหาฉันในแอป แล้วคลิกอนุญาตในป๊อปอัปที่ปรากฏขึ้น ซึ่งจะเป็นการอนุญาตให้เว็บไซต์เข้าถึงตำแหน่งปัจจุบันของคุณ
เมื่อเว็บแอปมีตำแหน่งที่จะทำงานด้วย การคลิกค้นหารายการใกล้เคียงใน Wikipedia จะส่งผลให้มีการส่งคำขอเครือข่ายเพิ่มเติมหลายรายการ คุณควรเห็นข้อมูลในลักษณะนี้
ตีความรายการใหม่
เช่นเดียวกับก่อนหน้านี้ แต่ละแถวของการจราจรของข้อมูลในเครือข่ายที่บันทึกไว้จะแสดงถึงคู่คําขอและการตอบกลับรายการเดียว
แถวแรกของรายการใหม่แสดงคำขอที่มีประเภทเป็น fetch ซึ่งสอดคล้องกับวิธีที่เว็บแอปขอข้อมูลจาก Wikipedia API
แถวต่อไปนี้ทั้งหมดเป็นรูปภาพ (png หรือ jpeg) ที่เชื่อมโยงกับรายการในวิกิพีเดีย แม้ว่าจะดูภาพหน้าจอได้ยากสักหน่อย แต่รายการในคอลัมน์ Waterfall มาจากคำตอบของ API โดยตรง
สำหรับคำขอเพิ่มเติมทั้งหมดเหล่านี้ เวลาที่แสดงจะแตกต่างกันไปตามระยะเวลาที่คุณเปิดหน้าเว็บไว้ก่อนที่จะคลิกค้นหารายการ Wikipedia ที่อยู่ใกล้เคียง สิ่งสำคัญที่สุดคือ when ไม่ได้เชื่อมต่อกับคำขอการนำทางเริ่มต้น คุณสามารถดูได้จากช่องว่างขนาดใหญ่ในการแสดง Waterfall ซึ่งแสดงระยะเวลาที่ผ่านไประหว่างการโหลดครั้งแรกกับเวลาที่ส่งคําขอ Wikipedia API
คําขอที่ส่งหลังจากผ่านไประยะหนึ่งหลังจากการนําทางจะจัดอยู่ในหมวดหมู่ "คําขอรันไทม์" ซึ่งต่างจากชุดคําขอแรกที่ใช้เพื่อแสดงหน้าเว็บเมื่อคุณไปยังหน้านั้นเป็นครั้งแรก
สรุป
เมื่อทำตามขั้นตอนใน Codelab นี้แล้ว คุณก็จะคุ้นเคยกับเครื่องมือที่ใช้วิเคราะห์สิ่งที่เว็บแอปพลิเคชันใดโหลด
แผงเครือข่ายจะช่วยตอบคำถามว่ามีอะไรกำลังโหลดอยู่ผ่าน URL ในคอลัมน์ชื่อและข้อมูลในคอลัมน์ประเภท รวมถึงเวลาที่โหลดผ่านการแสดง Waterfall
นอกจากนี้ คุณยังเห็นว่าคําขอที่มาจากหน้าเว็บ (โดยปกติ) จะจัดกลุ่มได้ 1 ใน 2 หมวดหมู่ต่อไปนี้
- คําขอเริ่มต้นที่สร้างขึ้นทันทีหลังจากไปยังหน้าใหม่สําหรับ HTML, JavaScript, CSS (และอาจรวมถึงชิ้นงานอื่นๆ)
- คำขอรันไทม์ที่เกิดจากการใช้งานหน้าเว็บของผู้ใช้ ซึ่งมักเริ่มต้นด้วยคําขอไปยัง API จากนั้นจึงเข้าสู่คําขอติดตามผลหลายรายการตามข้อมูลที่ดึงมาจาก API