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