Analisis Kode Situs Web Apa Pun dengan Ekstensi CSS Dig Chrome

Ada banyak hal yang dapat Anda lakukan Chrome DevTools dari mengedit situs web langsung hingga mempelajari permintaan HTTP terperinci. Tetapi kemampuan untuk menganalisis pola CSS tidak dimasukkan ke konsol.

Dengan CSS Dig, Anda bisa menganalisis semuanya Penyeleksi CSS, kekhususan, dan properti unik halaman web apa pun langsung dari Chrome. Ekstensi ini sepenuhnya gratis dan menawarkan banyak daya untuk pengembang frontend.

Saat Anda memeriksa lembar gaya Anda akan mendapatkan banyak data dari panel CSS Dig. Itu bisa menunjukkan kepada Anda penyeleksi individu, termasuk duplikat dan tingkat spesifisitas yang tidak perlu.

Untuk memulai, cukup instal plugin dan buka jendela konsol. Anda akan menemukannya dua tab di jendela CSS Dig: Properti dan Penyeleksi.

Anda dapat menelusuri hasilnya diorganisir oleh properti (warna, batas, bantalan), atau oleh penyeleksi (kelas, ID). Saya menemukan jendela Properties menjadi yang paling berharga, karena memungkinkan Anda untuk mempelajari font dan warna yang Anda gunakan.

Alat ini berfungsi untuk semua situs web, jadi itu juga berguna untuk rekayasa balik desain siapa pun. Anda dapat menyalin / menempelkan CSS secara langsung dari jendela ini dan menggunakannya kembali di proyek Anda sendiri.

Mungkin use case paling umum untuk CSS Dig adalah untuk hapus duplikat warna dari palet warna Anda. Berapa banyak nuansa hijau unik yang benar-benar Anda butuhkan? Atau, berapa banyak font sans-serif yang berbeda diperlukan untuk satu halaman?

CSS Dig sangat sederhana, jadi jangan berharap puluhan fitur seperti dengan DevTools. Sebaliknya, plugin ini agak diarahkan untuk pengembang frontend mengaudit situs untuk penyeleksi berulang atau properti duplikat.

Itu Kode sumber plugin tersedia gratis di GitHub di mana Anda juga akan menemukan semua pembaruan terbaru.