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