เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ: วิธีตรวจสอบและแก้ไขข้อบกพร่อง Flexbox ของ CSS

Sofia Emelianova
Sofia Emelianova

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณแก้ไขข้อบกพร่องของเลย์เอาต์ Flexbox ของ CSS ได้อย่างง่ายดาย แผงองค์ประกอบมีเครื่องมือแก้ไข Flexbox แบบ Context-Aware และการวางซ้อนที่ปรับแต่งได้

ดูวิดีโอเพื่อดูวิธีดำเนินการต่อไปนี้

  • ใช้เครื่องมือแก้ไข Flexbox เพื่อเปลี่ยนคุณสมบัติ Flexbox ด้วยการคลิกปุ่มแทนการพิมพ์
  • สลับการวางซ้อน Flexbox ในวิวพอร์ตเพื่อดูการเปลี่ยนแปลงที่คุณทําทันที
  • ใช้ส่วนองค์ประกอบ > เลย์เอาต์ > Flexbox เพื่อดูรายการองค์ประกอบทั้งหมดและค้นหาองค์ประกอบเหล่านั้นในต้นไม้ DOM นอกจากนี้ คุณยังปรับแต่งสีการวางซ้อนได้ที่นี่

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS flexbox โดยทั่วไปได้ที่ดู CSS > Flexbox

หากต้องการประสบการณ์การแก้ไขข้อบกพร่องแบบลงมือทำจริงในเครื่องมือสำหรับนักพัฒนาเว็บ ให้ทำตามบทแนะนำตรวจสอบและแก้ไขข้อบกพร่องของเลย์เอาต์ Flexbox ของ CSS