Pemeriksa CSS

Sama ada anda sedang menyahpepijat masalah reka letak (layout), melakukan kejuruteraan terbalik (reverse-engineering) ke atas reka bentuk yang anda kagumi, atau sekadar menyemak nilai jarak dan tipografi dengan pantas, CSS Inspector memberikan segala yang anda perlukan dalam panel terapung yang kemas. Tidak seperti DevTools pelayar, ia tidak menghalang ruang kerja anda — tiada panel yang tersemat (docked), tiada viewport yang berubah saiz. Cuma tuding, klik, dan periksa. Alat ini menunjukkan computed styles (apa yang sebenarnya dipaparkan oleh pelayar), bukan sekadar CSS yang ditulis. Ini bermakna anda melihat nilai sebenar selepas inheritance, specificity, dan cascading diselesaikan — nilai yang sama yang mempengaruhi apa yang dilihat oleh pengguna pada skrin.

Memeriksa sesuatu elemen tidak akan mencetuskan reflow atau repaint pada halaman itu sendiri, jadi anda boleh meneroka dengan bebas tanpa perlu risau mengganggu kedudukan skrol, animasi, atau state JavaScript. Pseudo-element seperti ::before dan ::after turut disokong — tuding pada elemen induk dan panel akan menunjukkan gaya generated content secara berasingan daripada gaya elemen itu sendiri. CSS custom properties (variables) diselesaikan kepada nilai computed akhirnya, tetapi panel juga menunjukkan nama variable yang menghasilkannya, jadi anda boleh mengesan semula nilai warna atau jarak kembali ke sumber design-token asalnya dan bukan sekadar melihat nombor piksel mentah.

Dalam penggunaan harian, kebanyakan pembangun menggunakan CSS Inspector berpuluh-puluh kali dalam satu sesi — menyemak sebab margin collapse, mengesahkan kod hex sebelum menyalinnya ke dalam stylesheet, atau memastikan breakpoint media query benar-benar menerapkan gaya yang sepatutnya. Oleh kerana ia adalah panel terapung dan bukan mod yang menguasai seluruh pelayar, anda boleh membiarkannya terbuka sambil bertukar tab untuk menyemak editor kod atau fail reka bentuk anda sendiri, kemudian kembali terus ke elemen yang sama tanpa kehilangan tempat anda tadi.