ตรวจสอบ CSS

ไม่ว่าคุณจะกำลังดีบักปัญหาเลย์เอาต์ ย้อนวิศวกรรมดีไซน์ที่คุณชื่นชอบ หรือแค่อยากเช็คค่า spacing และ typography อย่างรวดเร็ว CSS Inspector มอบทุกสิ่งที่คุณต้องการไว้ในพาเนลลอยที่เรียบง่าย ต่างจาก DevTools ของเบราว์เซอร์ตรงที่มันไม่กีดขวางการทำงานของคุณ — ไม่มีพาเนลที่ต้องด็อกไว้ ไม่ต้องปรับขนาด viewport แค่เลื่อนเมาส์ คลิก แล้วตรวจสอบได้เลย เครื่องมือนี้แสดงค่า computed styles (ค่าที่เบราว์เซอร์เรนเดอร์จริง) ไม่ใช่แค่ CSS ที่เขียนไว้ในโค้ด นั่นหมายความว่าคุณจะเห็นค่าจริงหลังจากผ่านการ inheritance, specificity และ cascading แล้ว — ค่าเดียวกับที่ส่งผลต่อสิ่งที่ผู้ใช้เห็นบนหน้าจอ

การตรวจสอบองค์ประกอบจะไม่ทำให้เกิด reflow หรือ repaint ของหน้าเว็บเลย คุณจึงสำรวจได้อย่างอิสระโดยไม่ต้องกังวลว่าจะไปรบกวนตำแหน่งการเลื่อน แอนิเมชัน หรือสถานะ JavaScript ใด ๆ นอกจากนี้ยังรองรับ pseudo-element อย่าง ::before และ ::after ด้วย — เพียงเลื่อนเมาส์ไปที่องค์ประกอบแม่ พาเนลจะแสดงสไตล์ของเนื้อหาที่สร้างขึ้นแยกต่างหากจากสไตล์ขององค์ประกอบเอง CSS custom properties (ตัวแปร) จะถูกคลี่ออกมาเป็นค่า computed สุดท้าย แต่พาเนลก็ยังแสดงชื่อตัวแปรที่ให้ค่านั้นด้วย ทำให้คุณสามารถตามรอยค่าสีหรือ spacing กลับไปยังต้นทาง design token ได้ แทนที่จะเห็นแค่ตัวเลขพิกเซลดิบ ๆ

ในการใช้งานประจำวัน นักพัฒนาส่วนใหญ่หยิบ CSS Inspector มาใช้หลายสิบครั้งต่อเซสชัน — ตรวจสอบว่าทำไม margin ถึงยุบตัว ยืนยัน hex code ก่อนคัดลอกไปใส่ในสไตล์ชีต หรือตรวจว่า breakpoint ของ media query นั้นใช้สไตล์ตามที่ตั้งใจไว้จริงหรือไม่ เนื่องจากมันเป็นพาเนลลอยแทนที่จะเป็นโหมดที่ครอบทั้งเบราว์เซอร์ คุณจึงเปิดมันค้างไว้ได้ในขณะที่สลับแท็บไปเช็คโค้ดในเอดิเตอร์หรือไฟล์ดีไซน์ของคุณ แล้วกลับมาที่องค์ประกอบเดิมที่เลื่อนเมาส์ไว้ได้ทันทีโดยไม่เสียตำแหน่งเดิม