Temukan alur kerja baru dalam referensi komprehensif fitur Chrome DevTools yang terkait dengan melihat dan mengubah CSS.
Lihat Melihat dan mengubah CSS untuk mempelajari dasar-dasarnya.
Pilih elemen
Panel Elemen di DevTools memungkinkan Anda melihat atau mengubah CSS satu elemen satu per satu.
Pada screenshot, elemen h1 yang ditandai dengan warna biru di Hierarki DOM adalah elemen yang dipilih.
Di sebelah kanan, gaya elemen ditampilkan di tab Gaya. Di sebelah kiri, elemen
ditandai di area pandang, tetapi hanya karena mouse diarahkan ke elemen tersebut di Hierarki
DOM.
Lihat Melihat CSS elemen untuk tutorial.
Ada banyak cara untuk memilih elemen:
- Di area pandang, klik kanan elemen, lalu pilih Periksa.
- Di DevTools, klik Select an element
atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux), lalu klik elemen di tampilan area pandang.
- Di DevTools, klik elemen di DOM Tree.
- Di DevTools, jalankan kueri seperti
document.querySelector('p')di Console, klik kanan hasil, lalu pilih Reveal in Elements panel.
atau tekan Command+Shift+C (Mac) atau
Control+Shift+C (Windows, Linux), lalu klik elemen di
tampilan area pandang.Melihat CSS
Gunakan tab Elemen > Gaya dan Dihitung untuk melihat aturan CSS dan mendiagnosis masalah CSS.
Menavigasi dengan link
Tab Gaya menampilkan link di berbagai tempat ke berbagai tempat lainnya, termasuk tetapi tidak terbatas pada:
- Di samping aturan CSS, untuk lembar gaya dan sumber CSS. Link tersebut akan membuka panel Sumber. Jika sheet gaya diminifikasi, lihat Membuat file yang diminifikasi dapat dibaca.
- Di bagian Diwarisi dari ..., ke elemen induk.
- Dalam panggilan
var(), ke deklarasi properti kustom. - Di properti singkatan
animation, ke@keyframes. - Link Pelajari lebih lanjut di tooltip dokumentasi.
- Dan masih banyak lagi.
Berikut beberapa di antaranya yang ditandai:
Gaya link dapat berbeda-beda. Jika Anda tidak yakin apakah sesuatu adalah link, coba klik untuk mengetahuinya.
Melihat tooltip dengan dokumentasi CSS, kekhususan, dan nilai properti kustom
Elemen > Gaya menampilkan tooltip dengan informasi berguna saat Anda mengarahkan kursor ke elemen tertentu.
Melihat dokumentasi CSS
Untuk melihat tooltip dengan deskripsi CSS singkat, arahkan kursor ke nama properti di tab Styles.
Klik Pelajari lebih lanjut untuk membuka Referensi CSS MDN tentang properti ini.
Untuk menonaktifkan tooltip, centang Jangan tampilkan.
Untuk mengaktifkannya kembali, centang Setelan > Preferensi > Elemen >
Tampilkan tooltip dokumentasi CSS.
Spesifisitas pemilih tampilan
Arahkan kursor ke pemilih untuk melihat tooltip dengan bobot spesifitas.
Melihat nilai properti kustom
Arahkan kursor ke --custom-property untuk melihat nilainya dalam tooltip.
Melihat CSS yang tidak valid, diganti, tidak aktif, dan lainnya
Tab Gaya mengenali berbagai jenis masalah CSS dan menandainya dengan cara yang berbeda.
Lihat Memahami CSS di tab Gaya.
Hanya melihat CSS yang benar-benar diterapkan ke elemen
Tab Gaya menampilkan semua aturan yang berlaku untuk elemen, termasuk deklarasi yang telah diganti. Jika Anda tidak tertarik dengan deklarasi yang diganti, gunakan tab Computed untuk hanya melihat CSS yang benar-benar diterapkan ke elemen.
- Pilih elemen.
- Buka tab Computed di panel Elements.
Centang kotak Tampilkan Semua untuk melihat semua properti.
Lihat Memahami CSS di tab Computed.
Melihat properti CSS dalam urutan abjad
Gunakan tab Dihitung. Lihat Hanya melihat CSS yang benar-benar diterapkan ke elemen.
Melihat properti CSS yang diwarisi
Centang kotak Tampilkan Semua di tab Dihitung. Lihat Hanya melihat CSS yang benar-benar diterapkan ke elemen.
Atau, scroll tab Gaya dan temukan bagian bernama Inherited from <element_name>.
Melihat aturan at CSS
Aturan at adalah pernyataan CSS yang memungkinkan Anda mengontrol perilaku CSS. Elemen > Gaya menampilkan aturan at berikut di bagian khusus: