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