Pemeriksa CSS

Baik saat Anda men-debug masalah layout, melakukan reverse-engineering desain yang Anda kagumi, atau sekadar mengecek nilai spacing dan tipografi dengan cepat, CSS Inspector memberi Anda semua yang dibutuhkan dalam panel mengambang yang rapi. Berbeda dari DevTools browser, alat ini tidak menghalangi tampilan Anda — tidak ada panel yang tertambat, tidak ada viewport yang mengecil. Cukup arahkan kursor, klik, dan periksa. Alat ini menampilkan computed styles (apa yang benar-benar dirender browser), bukan sekadar CSS yang ditulis. Artinya Anda melihat nilai sebenarnya setelah inheritance, specificity, dan cascading diselesaikan — nilai yang sama persis dengan yang memengaruhi tampilan di layar pengguna.

Memeriksa elemen tidak pernah memicu reflow atau repaint pada halaman itu sendiri, jadi Anda bisa menjelajah dengan bebas tanpa khawatir mengganggu posisi scroll, animasi, atau state JavaScript. Pseudo-element seperti ::before dan ::after juga didukung — arahkan kursor ke elemen induk dan panel akan menampilkan style dari konten yang dihasilkan secara terpisah dari style elemen itu sendiri. CSS custom properties (variabel) diselesaikan ke nilai computed akhirnya, tetapi panel juga menunjukkan nama variabel yang menghasilkannya, sehingga Anda bisa melacak nilai warna atau spacing kembali ke sumber design token-nya, bukan hanya melihat angka piksel mentah.

Dalam penggunaan sehari-hari, sebagian besar developer membuka CSS Inspector puluhan kali dalam satu sesi — mengecek kenapa margin runtuh (collapse), memastikan kode hex sebelum menyalinnya ke stylesheet, atau memverifikasi bahwa breakpoint media query benar-benar menerapkan style yang seharusnya. Karena berupa panel mengambang dan bukan mode yang menguasai seluruh browser, Anda bisa membiarkannya tetap terbuka sambil berpindah tab untuk mengecek code editor atau file desain Anda sendiri, lalu langsung kembali ke elemen yang sama tanpa kehilangan posisi.