Menganalisis mana-mana Kod Laman Web dengan CSS Menggugurkan Tambahan Chrome

Ada banyak yang boleh anda lakukan DevTools Chrome dari menyunting laman web secara langsung untuk mengkaji permintaan HTTP terperinci. Tetapi, keupayaan untuk menganalisis corak CSS tidak dibakar ke dalam konsol.

Dengan CSS Dig, anda boleh menganalisis semua Pemilih CSS, kekhususan, dan sifat unik dari mana-mana halaman web terus dari Chrome. Pelanjutan ini benar-benar percuma dan menawarkan banyak kuasa untuk frontend pemaju.

Semasa anda memeriksa stylesheet, anda akan mendapat banyak data dari panel CSS Dig. Ia boleh menunjukkan kepada anda pemilihan individu, termasuk pendua dan tahap kekhususan yang tidak perlu.

Untuk bermula, semata-mata memasang plugin dan buka tetingkap konsol. Anda akan dapati dua tab dalam tetingkap CSS Digali: Hartanah dan Pemilih.

Anda boleh menyemak imbas hasil dianjurkan oleh hartanah (warna, sempadan, padding), atau oleh pemilih (kelas, ID). Saya dapati tetingkap Properties menjadi yang paling berharga, kerana ia membolehkan anda mempelajari fon dan warna yang anda gunakan.

Alat ini berfungsi di seluruh papan untuk mana-mana laman web, jadi ia juga berguna kejuruteraan terbalik reka bentuk sesiapa pun. Anda boleh menyalin / tampal CSS secara langsung dari tetingkap ini dan menggunakannya semula pada projek anda sendiri.

Mungkin kes penggunaan yang paling biasa untuk CSS Dig ialah warna pendua yang jelas dari palet warna anda. Berapa banyak warna hijau yang unik yang anda perlukan? Atau, berapa banyak font sans-serif yang diperlukan untuk satu halaman?

CSS Dig sangat mudah, jadi jangan mengharapkan berpuluh-puluh ciri seperti DevTools. Sebaliknya, plugin ini agak ditujukan ke arah pemaju frontend laman pengauditan untuk pemilih berulang atau sifat pendua.

The kod sumber plugin ini boleh didapati secara percuma di GitHub di mana anda juga akan mendapati semua kemas kini terkini.