Detail CSS Inspector di Setiap Situs dengan CSSPeeper untuk Chrome

Panel Chrome DevTools biasa sangat kuat. Itu memungkinkan siapa pun menyelam jauh ke dalam halaman apa saja untuk mempelajari tata letak situs, CSS, dan bahkan header HTTP jika diperlukan.

Anda dapat melakukan banyak hal dengan inspektur DevTools CSS. Tetapi tidak memiliki panel GUI yang jelas dan itu satu hal yang setiap pengembang akan suka.

Lihat CSSPeeper, ekstensi Chrome gratis yang menambahkan inspektur GUI ini ke browser Anda. Ini memungkinkan Anda mempelajari properti CSS dari elemen apa pun di halaman mana pun, meskipun itu baru dibangun untuk Chrome sekarang.

Setelah terinstal, Anda baru saja kunjungi halaman web dan klik tombol utama ekstensi di bilah pengaya Chrome. Jendela inspektur baru muncul di bagian atas halaman web dengan perincian tentang setiap elemen utama.

Saat Anda menelusuri situs, Anda dapat mengklik elemen apa pun yang Anda lihat dengan garis putus-putus. Ini dapat mencakup tombol, bagian halaman, header, item navigasi, apa saja.

Dari sana Anda akan mendapatkan seluruh inspektur dengan rincian tentang tipografi, pilihan warna, dan gaya font. Ini cara yang bagus untuk melakukannya tarik gaya langsung dari halaman web tanpa menggali sendiri kode CSS.

CSSPeeper bahkan memungkinkan Anda pilih warna terkait dengan pemilih warna bawaan dan generator skema warna. Anda dapat mengekspor gambar dari halaman, membangun skema warna Anda sendiri, dan menerapkan ini ke dalam maket Anda sendiri dengan Photoshop atau Sketch.

Saya terutama merekomendasikan ekstensi ini untuk desainer alih-alih pengembang karena merupakan plugin yang jauh lebih ramah desainer yang menarik CSS mentah dan mengubah kode menjadi potongan data yang mudah dibaca.

Tetapi plugin ini juga dapat membantu pengembang juga! Ini benar-benar a alat inspeksi situs yang kuat untuk semua jenis CSS.

Lihatlah beranda CSSPeeper untuk mempelajari lebih lanjut tentang apa yang dapat dilakukannya. Halaman utama juga menyertakan tautan ke toko Chrome sehingga Anda dapat memasang ekstensi secara gratis dan membawanya keluar untuk uji coba.