ภาพรวมแผงองค์ประกอบ

Dale St. Marthe

ใช้แผงองค์ประกอบเพื่อตรวจสอบและแก้ไของค์ประกอบ DOM

ภาพรวม

แผงองค์ประกอบมีอินเทอร์เฟซที่มีประสิทธิภาพในการตรวจสอบและจัดการ DOM คุณใช้แผนผัง DOM ซึ่งคล้ายกับเอกสาร HTML เพื่อเลือกโหนด DOM ที่เฉพาะเจาะจงและแก้ไขด้วยเครื่องมืออื่นๆ ได้

แผง Elements ยังมีแท็บต่อไปนี้ซึ่งมีเครื่องมือที่เกี่ยวข้อง

• รูปแบบ

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

• คำนวณ: แสดงรายการพร็อพเพอร์ตี้ที่แก้ไขแล้วซึ่งใช้กับองค์ประกอบเมื่อ Chrome แสดงผล

• เลย์เอาต์: มีตัวเลือกในการแก้ไขภาพซ้อนทับกริดและFlexbox

• เครื่องมือตรวจหาเหตุการณ์: แสดงเครื่องมือตรวจหาเหตุการณ์ทั้งหมดและแอตทริบิวต์ของเครื่องมือ ช่วยให้คุณค้นหาแหล่งที่มาของ Listener เหตุการณ์และกรอง Listener แบบแพสซีฟหรือแบบบล็อกได้

• เบรกพอยท์ DOM: แสดงรายการเบรกพอยท์การเปลี่ยนแปลง DOM ที่เพิ่มจากแผงองค์ประกอบ และช่วยให้คุณเปิดใช้ ปิดใช้ นำออก หรือแสดงเบรกพอยท์เหล่านั้นได้

• พร็อพเพอร์ตี้: เลือกโหนด DOM เพื่อตรวจสอบและจัดเรียงพร็อพเพอร์ตี้ของออบเจ็กต์เองและพร็อพเพอร์ตี้ที่รับช่วงมา

• การช่วยเหลือพิเศษ: แสดงรายการองค์ประกอบที่มีป้ายกำกับ ARIA และพร็อพเพอร์ตี้ขององค์ประกอบ ช่วยให้คุณเปิด/ปิดและตรวจสอบแผนผังการช่วยเหลือพิเศษได้ (ทดลอง)

เปิดแผงองค์ประกอบ

โดยค่าเริ่มต้น เมื่อคุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บ แผงองค์ประกอบจะเปิดขึ้น นอกจากนี้ คุณยังตรวจสอบโหนดที่ใดก็ได้ในหน้าเว็บเพื่อเปิดแผงองค์ประกอบโดยอัตโนมัติ

วิธีเปิดแผงองค์ประกอบด้วยตนเอง

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. เปิดเมนูคำสั่งโดยกดปุ่มต่อไปนี้
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. เริ่มพิมพ์ Elements เลือกแสดงองค์ประกอบ แล้วกด Enter DevTools จะแสดงแผงองค์ประกอบในลิ้นชักที่ด้านล่างของหน้าต่าง DevTools