Pemeriksa CSS Terperinci di Setiap Tapak dengan CSSPeeper untuk Chrome

Panel DevTools Chrome tetap sangat kuat. Ia membolehkan sesiapa menyelam jauh ke dalam mana-mana halaman untuk mempelajari susun atur tapak, CSS, dan juga pengepala HTTP jika diperlukan.

Anda boleh melakukan banyak dengan inspektor CSS DevTools. Tetapi ia tidak mempunyai panel GUI yang jelas dan itulah satu perkara yang setiap pencinta akan suka.

Lihat CSSPeeper, pelanjutan Chrome percuma yang menambah inspektor GUI ini ke penyemak imbas anda. Ia membolehkan anda mengkaji sifat-sifat CSS unsur mana-mana pada mana-mana halaman, walaupun ia hanya dibina untuk Chrome sekarang.

Setelah dipasang anda hanya lawati halaman web dan klik butang utama pelanjutan dalam bar tambahan Chrome. Tetingkap pemeriksa baru muncul di atas halaman web dengan butiran mengenai setiap elemen utama.

Semasa anda melayari laman web, anda boleh mengklik pada mana-mana unsur yang anda lihat dengan garis besar titik. Ini boleh termasuk butang, bahagian halaman, tajuk, item navigasi, anda namakannya.

Dari sana anda akan mendapat pemeriksa keseluruhan dengan butiran mengenai tipografi, pilihan warna, dan gaya fon. Ini cara yang bagus untuk tarik gaya terus dari laman web tanpa menggali kod CSS sendiri.

CSSPeeper juga membolehkan anda pilih warna yang berkaitan dengan pemetik warna terbina dalam dan penjana skema warna. Anda boleh mengeksport imej dari halaman, membina skema warna anda sendiri, dan memohon ini ke mockups anda sendiri dengan Photoshop atau lakaran.

Saya terutamanya mengesyorkan sambungan ini untuk pereka bukannya pemaju kerana ia adalah plugin yang lebih mesra pereka yang menarik CSS mentah dan mengubah kod ke dalam sekeping data yang mudah dibaca.

Tetapi plugin ini juga boleh membantu pemaju! Ia benar-benar a alat pemeriksaan tapak berkuasa untuk semua jenis CSS.

Lihat laman utama CSSPeeper untuk mengetahui lebih lanjut mengenai apa yang boleh dilakukan. Halaman utama juga termasuk pautan ke kedai Chrome supaya anda boleh memasang pelanjutan secara percuma dan membawanya keluar untuk menjalankan ujian.