แผงการครอบคลุมช่วยให้คุณค้นหาโค้ด JavaScript และ CSS ที่ไม่ได้ใช้ การนำโค้ดที่ไม่ได้ใช้ออกจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บและประหยัดอินเทอร์เน็ตมือถือของผู้ใช้
ภาพรวม
การจัดส่ง JavaScript หรือ CSS ที่ไม่ได้ใช้เป็นปัญหาที่พบได้ทั่วไปในการพัฒนาเว็บ เช่น สมมติว่าคุณต้องการใช้คอมโพเนนต์ปุ่มของ Bootstrap ในหน้าเว็บ หากต้องการใช้คอมโพเนนต์ปุ่ม คุณต้องเพิ่มลิงก์ไปยัง สไตล์ชีตของ Bootstrap ใน HTML ดังนี้
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
สไตล์ชีตนี้ไม่ได้มีเพียงโค้ดสำหรับคอมโพเนนต์ปุ่มเท่านั้น ซึ่งมี CSS สำหรับคอมโพเนนต์ทั้งหมดของ Bootstrap แต่คุณไม่ได้ใช้คอมโพเนนต์ Bootstrap อื่นๆ หน้าเว็บจึงดาวน์โหลด CSS จำนวนมากที่ไม่จำเป็น CSS ที่เกินมานี้เป็นปัญหาด้วยเหตุผลต่อไปนี้
- โค้ดเพิ่มเติมจะทำให้การโหลดหน้าเว็บช้าลง ดูCSS ที่บล็อกการแสดงผล
- หากผู้ใช้เข้าถึงหน้าเว็บในอุปกรณ์เคลื่อนที่ โค้ดเพิ่มเติมจะใช้ข้อมูลมือถือของผู้ใช้
แผงความครอบคลุมช่วยให้คุณบันทึกหน้าเว็บและดูรายงานไบต์ทั้งหมดที่ใช้และไม่ได้ใช้ของทรัพยากร CSS และ JavaScript รวมถึงติดตามโค้ดในแผงแหล่งที่มาได้
เปิดแผงความครอบคลุม
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เปิดเมนูคำสั่ง
เริ่มพิมพ์
coverageเลือกคำสั่งแสดงความครอบคลุม แล้ว กด Enter เพื่อเรียกใช้คำสั่ง แผงความครอบคลุมจะเปิดขึ้นในลิ้นชัก
หรือที่มุมขวาบน ให้เลือก more_vert ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > ความครอบคลุม
บันทึกการครอบคลุมของโค้ด
วิธีบันทึกการครอบคลุมของโค้ด
หากต้องการตั้งค่าขอบเขตความครอบคลุม ในแถบการดำเนินการที่ด้านบนของแผงความครอบคลุม ให้เลือกต่อฟังก์ชันหรือต่อบล็อกจากรายการแบบเลื่อนลง
หากต้องการเริ่มบันทึก ให้คลิกปุ่ม โหลดซ้ำที่กึ่งกลางของแผง แผงความครอบคลุมจะโหลดหน้าเว็บซ้ำ จับภาพโค้ดที่จำเป็นในการโหลดหน้าเว็บ และบันทึกต่อขณะที่คุณโต้ตอบกับหน้าเว็บ
หากต้องการหยุดบันทึกการครอบคลุมของโค้ด ให้คลิก หยุดวัดคุมการครอบคลุมและแสดงผลลัพธ์ในแถบการดำเนินการของแผง
วิเคราะห์การครอบคลุมของโค้ด
ตารางในแผงความครอบคลุมจะแสดงทรัพยากรที่วิเคราะห์และปริมาณโค้ดที่ใช้ในแต่ละทรัพยากร
คลิกแถวเพื่อเปิดทรัพยากรนั้นในแผงแหล่งที่มา และดูรายละเอียดโค้ดที่ใช้และโค้ดที่ไม่ได้ใช้ทีละบรรทัด บรรทัดโค้ดที่ไม่ได้ใช้จะทำเครื่องหมายด้วยเส้นสีเทาแนวตั้งข้างคอลัมน์ที่มีหมายเลขบรรทัดทางด้านซ้าย
- คอลัมน์ URL คือ URL ของทรัพยากรที่ได้รับการวิเคราะห์
- คอลัมน์ประเภทจะระบุว่าทรัพยากรมี CSS, JavaScript หรือทั้ง 2 อย่าง
- คอลัมน์ไบต์ทั้งหมดคือขนาดรวมของทรัพยากรในหน่วยไบต์
- คอลัมน์ไบต์ที่ไม่ได้ใช้คือจำนวนไบต์ที่ไม่ได้ใช้
- คอลัมน์การแสดงภาพการใช้งานคือการแสดงภาพของคอลัมน์ไบต์ทั้งหมดและ ไบต์ที่ไม่ได้ใช้ ส่วนสีเทาของแถบคือไบต์ที่ไม่ได้ใช้ ส่วนสีเขียวคือไบต์ที่ใช้
หากต้องการกรองรายงานตาม URL ให้ระบุ URL ในตัวกรองในแถบการดำเนินการ
แถบสถานะที่ด้านล่างของแผงความครอบคลุมจะแสดงเปอร์เซ็นต์ของโค้ดที่ใช้ แถบสถานะจะพิจารณาการกรอง
ข้างแถบตัวกรอง คุณสามารถเลือกทั้งหมด หรือเฉพาะ CSS หรือ JavaScript จากรายการแบบเลื่อนลงเพื่อแสดงในรายงาน
หากต้องการรวมโค้ดส่วนขยายไว้ในรายงาน ให้เปิด Content scripts
หากต้องการส่งออกรายงาน ให้คลิก ส่งออกความครอบคลุม