ตัวตรวจสอบการจัดวางสำหรับ Flexbox และ Grid

Chrome DevTools จะทำเครื่องหมายคอนเทนเนอร์เฟล็กซ์ด้วยป้ายกำกับว่า "เฟล็กซ์" ถัดจากโหนด DOM ในแผงองค์ประกอบ การคลิกป้ายนี้จะเปิดหรือปิดโอเวอร์เลย์เฟล็กซ์บ็อกซ์ ซึ่งเป็นเส้นสีที่แสดงแกนหลัก แกนตัดขวาง ขอบเขตของรายการ และระยะห่าง

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

DevTools → แท็บองค์ประกอบ → แท็บการจัดวาง จะแสดงรายการคอนเทนเนอร์เฟล็กซ์และกริดทั้งหมดบนหน้าเว็บ การคลิกชื่อคอนเทนเนอร์จะเลือกคอนเทนเนอร์นั้นใน DOM และเปิดหรือปิดโอเวอร์เลย์ คุณสามารถกำหนดลักษณะของโอเวอร์เลย์ เช่น สีเส้น การแสดงป้ายกำกับ และขนาดแทร็ก ได้ที่นี่

โอเวอร์เลย์จะแสดงชื่อและขนาดของแทร็กเมื่อเปิดใช้ "แสดงขนาดแทร็ก" ขนาดโดยธรรมชาติ (auto, min-content, max-content) และหน่วยเศษส่วน (fr) จะแสดงค่าพิกเซลที่คำนวณแล้ว ทำให้เห็นว่าแต่ละหน่วย fr แบ่งพื้นที่ว่างที่มีอยู่อย่างไร

เลือกรายการเฟล็กซ์ (รายการลูกของคอนเทนเนอร์เฟล็กซ์) แผงสไตล์จะแสดงการขยายคุณสมบัติแบบย่อของเฟล็กซ์ ได้แก่ การเติบโต การหดตัว และขนาดพื้นฐาน โอเวอร์เลย์จะเน้นขนาดตามแกนหลัก ขนาดพื้นฐาน และการเติบโตหรือการหดตัวที่นำไปใช้กับรายการนั้น

คอนเทนเนอร์กริดที่มี grid-template-areas จะแสดงโอเวอร์เลย์ของพื้นที่ที่ตั้งชื่อ แต่ละบริเวณจะมีป้ายกำกับและใช้สีแยกกัน ภาพนี้ช่วยให้ตรวจสอบได้ง่ายว่าการกำหนดพื้นที่กริดตรงกับแม่แบบเลย์เอาต์ที่ต้องการ

การรองรับกริดย่อยใน DevTools จะทำเครื่องหมายคอนเทนเนอร์กริดย่อยให้แตกต่างอย่างชัดเจน เส้นแทร็กของคอนเทนเนอร์เหล่านี้จะตรงกับแทร็กกริดแม่ — โอเวอร์เลย์จะแสดงการจัดแนวนี้เป็นภาพ เพื่อยืนยันว่ารายการกริดย่อยเข้าร่วมในระบบพิกัดของกริดแม่

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

โอเวอร์เลย์จะแสดงระยะช่องว่างเป็นแถบสีระหว่างรายการ วิธีนี้ช่วยให้ยืนยันค่าช่องว่างได้ง่าย และระบุได้ว่าระยะห่างมาจากคุณสมบัติช่องว่าง (ถูกต้อง) หรือจากระยะขอบ (ซึ่งอาจยุบตัวโดยไม่คาดคิดในแถวเฟล็กซ์)

โอเวอร์เลย์กริดจะแยกแทร็กโดยนัย (สร้างอัตโนมัติสำหรับรายการที่ล้น) ออกจากแทร็กที่ระบุชัดเจน (กำหนดไว้ในแม่แบบกริด) เส้นประจะทำเครื่องหมายแทร็กโดยนัย หากเนื้อหาทำให้เกิดแทร็กโดยนัยที่ไม่คาดคิด โอเวอร์เลย์จะแสดงรูปแบบการล้นให้เห็นทันที

ผสานตัวตรวจสอบเลย์เอาต์เข้ากับโหมดอุปกรณ์ ปรับขนาดพื้นที่แสดงผลและดูการจัดเรียงใหม่แบบเรียลไทม์ของการห่อรายการเฟล็กซ์และแทร็กเติมอัตโนมัติ/พอดีอัตโนมัติของกริด วิธีนี้ช่วยตรวจพบปัญหาเลย์เอาต์แบบตอบสนองได้เร็วกว่าการปรับขนาดหน้าต่างเบราว์เซอร์ด้วยตนเอง

โอเวอร์เลย์กริดของ DevTools แสดงอะไรที่ไม่เห็นในหน้าที่แสดงผล

ตัวตรวจสอบเลย์เอาต์เฟล็กซ์และกริดของ DevTools แสดงเส้นแกน ขนาดแทร็ก ระยะช่องว่าง พื้นที่ที่ตั้งชื่อ และแทร็กโดยนัยเป็นโอเวอร์เลย์แบบโต้ตอบ เมื่อใช้ร่วมกับแผงเลย์เอาต์สำหรับจัดการโอเวอร์เลย์ เครื่องมือนี้ทำให้การแก้ไขข้อผิดพลาดของเลย์เอาต์ CSS ที่ซับซ้อนรวดเร็วและเข้าใจง่ายกว่าการอ่าน CSS เพียงอย่างเดียว