ใช้แผงองค์ประกอบเพื่อตรวจสอบและแก้ไของค์ประกอบ DOM
ภาพรวม
แผงองค์ประกอบมีอินเทอร์เฟซที่มีประสิทธิภาพในการตรวจสอบและจัดการ DOM คุณสามารถใช้แผนผัง DOM ซึ่งมีลักษณะคล้ายกับเอกสาร HTML เพื่อเลือกโหนด DOM ที่เฉพาะเจาะจงและแก้ไขด้วยเครื่องมืออื่นๆ ได้
แผงองค์ประกอบยังมีแท็บต่อไปนี้ที่มีเครื่องมือที่เกี่ยวข้อง
รูปแบบ
- ดูและแก้ไขข้อบกพร่องกฎ CSS ที่มีผลกับองค์ประกอบจากสไตล์ชีตทั้งหมด
- ค้นหา CSS ที่ไม่ถูกต้อง ลบล้าง ไม่ทำงาน หรืออื่นๆ ที่ไม่ทำงานตามที่ตั้งใจไว้
- แก้ไของค์ประกอบโดยเพิ่มประกาศ การใช้คลาส และการโต้ตอบกับรูปแบบกล่อง
- เข้าถึงตัวเลือกการแก้ไขคอนเทนเนอร์ด้วยป้ายที่พบในแผนผัง DOM
ที่คำนวณแล้ว: แสดงรายการพร็อพเพอร์ตี้ที่แก้ไขแล้วซึ่งใช้กับองค์ประกอบเมื่อ Chrome แสดงผล
เลย์เอาต์: มีตัวเลือกในการแก้ไขการวางซ้อนตารางกริดและ Flexbox
รายการฟังเหตุการณ์: แสดงรายการฟังเหตุการณ์ทั้งหมดและแอตทริบิวต์ของรายการฟังเหตุการณ์ ช่วยให้คุณค้นหาแหล่งที่มาของ Listener เหตุการณ์และกรอง Listener แบบแพสซีฟหรือการบล็อกได้
เบรกพอยต์ DOM: แสดงเบรกพอยต์การเปลี่ยนแปลง DOM ที่เพิ่มจากแผงองค์ประกอบ และให้คุณเปิดใช้ ปิดใช้ นําออก หรือแสดงเบรกพอยต์ได้
พร็อพเพอร์ตี้: เลือกโหนด DOM เพื่อตรวจสอบและจัดเรียงพร็อพเพอร์ตี้ของออบเจ็กต์เองและที่รับค่ามา
การช่วยเหลือพิเศษ: แสดงรายการองค์ประกอบที่มีป้ายกำกับ ARIA และพร็อพเพอร์ตี้ขององค์ประกอบ ช่วยให้คุณสลับและตรวจสอบต้นไม้การช่วยเหลือพิเศษได้ (เวอร์ชันทดลอง)
เปิดแผงองค์ประกอบ
โดยค่าเริ่มต้น เมื่อคุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บ แผงองค์ประกอบจะเปิดขึ้น นอกจากนี้ คุณยังตรวจสอบโหนดที่ใดก็ได้ในหน้าเว็บเพื่อเปิดแผงองค์ประกอบโดยอัตโนมัติ
วิธีเปิดแผงองค์ประกอบด้วยตนเอง
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เปิดเมนูคำสั่งโดยกดแป้นต่อไปนี้
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- เริ่มพิมพ์
Elementsเลือกแสดงองค์ประกอบ แล้วกด Enter DevTools จะแสดงแผงองค์ประกอบในลิ้นชักที่ด้านล่างของหน้าต่าง DevTools