แผงการครอบคลุมในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะช่วยคุณค้นหาโค้ด 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 การบล็อกการแสดงผล
- หากผู้ใช้เข้าถึงหน้าเว็บบนอุปกรณ์เคลื่อนที่ โค้ดเพิ่มเติมจะใช้อินเทอร์เน็ตมือถือของผู้ใช้
เปิดแผงการครอบคลุม
- เปิดเมนูคำสั่ง
เริ่มพิมพ์
coverage
เลือกคําสั่งแสดงการครอบคลุม แล้วกด Enter เพื่อเรียกใช้คำสั่ง แผงการครอบคลุมจะเปิดขึ้นในลิ้นชัก
บันทึกการครอบคลุมของรหัส
วิธีบันทึกการครอบคลุมของโค้ด
หากต้องการกำหนดขอบเขตความครอบคลุม ให้เลือกต่อฟังก์ชันหรือต่อการบล็อกจากรายการแบบเลื่อนลงในแถบการดำเนินการที่ด้านบนของแผงการครอบคลุม
หากต้องการเริ่มบันทึก ให้คลิกรีเฟรช เริ่มวัดการครอบคลุมและโหลดหน้าซ้ำ แผงการครอบคลุมจะโหลดหน้าเว็บซ้ำ จับภาพโค้ดที่จําเป็นในการโหลดหน้าเว็บ และดําเนินการบันทึกต่อขณะที่คุณโต้ตอบกับหน้าเว็บ
หากต้องการหยุดบันทึกการครอบคลุมของโค้ด ให้คลิก stop_circle หยุดการครอบคลุมการวัดและแสดงผลลัพธ์
วิเคราะห์การครอบคลุมของโค้ด
ตารางในแผงการครอบคลุมจะแสดงทรัพยากรที่ได้รับการวิเคราะห์ และจำนวนโค้ดที่ใช้ภายในทรัพยากรแต่ละรายการ
คลิกแถวเพื่อเปิดทรัพยากรนั้นในแผงแหล่งที่มา และดูรายละเอียดแบบทีละบรรทัดของโค้ดที่ใช้และโค้ดที่ไม่ได้ใช้ บรรทัดโค้ดที่ไม่ได้ใช้งานจะมีเส้นสีแดงกำกับอยู่ถัดจากคอลัมน์ที่มีหมายเลขบรรทัดทางด้านซ้าย
- คอลัมน์ URL คือ URL ของทรัพยากรที่ได้รับการวิเคราะห์
- คอลัมน์ Type จะระบุว่าทรัพยากรมี CSS, JavaScript หรือทั้ง 2 อย่าง
- คอลัมน์ไบต์ทั้งหมดคือขนาดรวมของทรัพยากรในหน่วยไบต์
- คอลัมน์ไบต์ที่ไม่ได้ใช้คือจำนวนไบต์ที่ไม่มีการใช้งาน
- คอลัมน์สุดท้ายที่ไม่มีชื่อจะแสดงภาพคอลัมน์ไบต์ทั้งหมดและไบต์ที่ไม่ได้ใช้ ส่วนสีแดงของแถบคือไบต์ที่ไม่ได้ใช้ ส่วนสีเทาจะเป็นไบต์ที่ใช้
หากต้องการกรองรายงานตาม URL ให้ระบุในตัวกรองในแถบการดำเนินการ
แถบสถานะที่ด้านล่างของแผงการครอบคลุมจะแสดงเปอร์เซ็นต์ของโค้ดที่ใช้ แถบสถานะจะมีการกรองด้วย
ถัดจากแถบตัวกรอง คุณสามารถเลือกทั้งหมดหรือเฉพาะ CSS หรือ JavaScript เพื่อแสดงในรายงานได้จากรายการแบบเลื่อนลง
หากต้องการใส่โค้ดส่วนขยายลงในรายงาน ให้เปิด check_box สคริปต์เนื้อหา
หากต้องการส่งออกรายงาน ให้คลิกดาวน์โหลด ส่งออกการครอบคลุม