การครอบคลุม: หา JavaScript และ CSS ที่ไม่ได้ใช้

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

แผงการครอบคลุมช่วยให้คุณพบโค้ด 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 รวมถึงติดตามโค้ดในแผงแหล่งที่มา

เปิดแผงความครอบคลุม

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. เปิดเมนูคำสั่ง

  3. เริ่มพิมพ์ coverage เลือกคำสั่ง Show Coverage แล้วกด Enter เพื่อเรียกใช้คำสั่ง แผงความครอบคลุมจะเปิดขึ้นในลิ้นชัก

    แผงความครอบคลุม

หรือที่มุมขวาบน ให้เลือก more_vert ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > ความครอบคลุม

บันทึกการครอบคลุมโค้ด

วิธีบันทึกการครอบคลุมโค้ด

  1. หากต้องการตั้งค่าขอบเขตการครอบคลุม ในแถบการดำเนินการที่ด้านบนของแผงการครอบคลุม ให้เลือกต่อฟังก์ชันหรือต่อบล็อกจากรายการแบบเลื่อนลง

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

  3. หากต้องการหยุดบันทึกการครอบคลุมโค้ด ให้คลิก หยุดวัดคุมการครอบคลุมและแสดงผลลัพธ์

วิเคราะห์การครอบคลุมโค้ด

ตารางในแผงความครอบคลุมจะแสดงทรัพยากรที่วิเคราะห์และจํานวนโค้ดที่ใช้ภายในแต่ละทรัพยากร

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

รายงานการครอบคลุมโค้ด

  • คอลัมน์ URL คือ URL ของทรัพยากรที่วิเคราะห์
  • คอลัมน์ประเภทจะระบุว่าทรัพยากรมี CSS, JavaScript หรือทั้ง 2 อย่าง
  • คอลัมน์จำนวนไบต์ทั้งหมดคือขนาดรวมของทรัพยากรในหน่วยไบต์
  • คอลัมน์ไบต์ที่ไม่ได้ใช้คือจํานวนไบต์ที่ไม่ได้ใช้
  • คอลัมน์สุดท้ายที่ไม่มีชื่อคือการแสดงภาพคอลัมน์ไบต์ทั้งหมดและไบต์ที่ไม่ได้ใช้ ส่วนสีแดงของแถบคือไบต์ที่ไม่ได้ใช้ ส่วนสีเทาคือไบต์ที่ใช้

หากต้องการกรองรายงานตาม URL ให้ระบุ URL นั้นในตัวกรองในแถบการดำเนินการ

แถบสถานะที่ด้านล่างของแผงความครอบคลุมจะแสดงเปอร์เซ็นต์ของโค้ดที่ใช้ แถบสถานะจะพิจารณาการกรอง

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

หากต้องการรวมโค้ดส่วนขยายไว้ในรายงาน ให้เปิด สคริปต์เนื้อหา

หากต้องการส่งออกรายงาน ให้คลิก ส่งออกความครอบคลุม