Browser DevTools

CSS yang kita tulis dan CSS yang benar-benar diterapkan browser tidak selalu sama: aturan bisa kalah cascade, properti bisa salah ketik, dan nilai bisa berubah karena inheritance. Menebak penyebabnya di dalam kode sumber adalah pekerjaan yang lambat. Browser DevTools memotong jalan itu: alat inspeksi bawaan yang memperlihatkan setiap elemen, setiap aturan yang cocok, dan nilai akhirnya, lengkap dengan kemampuan mengubah kode secara langsung. Pada Chapter ini kita mengenal panel-panel utamanya dan mempraktikkannya pada demo yang disertakan.

Membuka DevTools #

Semua browser utama membawa DevTools dengan tata letak yang mirip. Langkah membukanya:

1. Tekan F12 pada Windows/Linux, atau Cmd+Opt+I pada macOS. Alternatifnya Ctrl+Shift+I (Windows/Linux).
2. Atau klik kanan pada elemen mana pun di halaman, lalu pilih Inspect (di beberapa browser berlabel “Periksa”). Elemen yang diklik langsung terpilih di panel Elements — cara paling cepat untuk sampai ke node yang dimaksud.
3. Atau melalui menu browser: di Chrome buka menu tiga titik lalu More tools → Developer tools; di Firefox buka Web Developer → Toggle Tools.

Panel Elements dan Styles #

Panel Elements menampilkan pohon DOM halaman: setiap elemen dapat dipilih, dan isi serta atributnya dapat diperiksa. Ketika satu elemen terpilih, panel Styles di sebelahnya menampilkan semua aturan CSS yang cocok untuk elemen tersebut — aturan kita di bagian atas, gaya bawaan browser (user-agent stylesheet) di bagian bawah.

Beberapa kemampuan panel Styles yang paling sering dipakai:

1. Membaca aturan terurut: aturan ditampilkan dari yang paling menentukan ke yang paling umum. Deklarasi yang dicoret berarti kalah oleh deklarasi lain; pola membacanya kita praktikkan pada Chapter Membaca Computed Styles .
2. Menonaktifkan properti: setiap deklarasi memiliki kotak centang di sebelah kirinya. Menghilangkan centang menonaktifkan properti itu seketika; menyalakannya kembali tidak menyimpan apa pun ke berkas asli.
3. Tombol filter: ikon penyaring di kepala panel Styles membuka kotak pencarian properti. Mengetik padding menyembunyikan semua deklarasi lain, berguna pada elemen yang menerima puluhan aturan.
4. Mengubah nilai langsung: klik pada nilai (misalnya 16px) lalu ketik nilai baru; panah atas-bawah menaikkan dan menurunkan angka. Perubahan bersifat sementara dan hilang saat halaman dimuat ulang.
5. Memeriksa kotak model: diagram di bagian bawah panel menampilkan ukuran content, padding, border, dan margin elemen terpilih secara visual.

Praktik Singkat pada Demo #

Demo chapter ini berisi tiga elemen yang sengaja diberi gaya khas: sebuah tombol, kotak peringatan, dan kartu semi-transparan. Ikuti langkah berikut sambil membuka demo:

1. Buka demo panel-styles.html, lalu tekan F12.
2. Aktifkan mode inspeksi (Ctrl+Shift+C), arahkan kursor ke tombol “Simpan Perubahan” hingga halaman menyorotnya, lalu klik.
3. Pada panel Styles, cari aturan .tombol dan perhatikan deklarasi background-color: rgb(37, 99, 235) — nilai inilah yang diperiksa otomatis oleh harness uji.
4. Klik kotak centang di depan background-color untuk menonaktifkannya; tombol berubah menjadi abu-abu bawaan browser. Nyalakan kembali untuk mengembalikannya.
5. Buka tombol filter, ketik padding, dan amati bahwa tombol memakai padding: 12px 20px — satu shorthand untuk dua pasang sisi.
6. Pilih elemen kartu peringatan, lalu amati border-left-width: 4px pada diagram kotak model di bawah panel.

Hasil di Browser:

Tombol "Simpan Perubahan" berlatar rgb(37, 99, 235) dengan teks putih
rgb(255, 255, 255), sudut membulat 8px, padding atas 12px, dan padding
kiri 20px. Kotak peringatan membawa border kiri selebar 4px berwarna
rgb(217, 119, 6) di atas latar rgb(255, 247, 237), sedangkan kartu
redup tampil dengan opacity 0.9.

Device Mode dalam Sekilas #

Tombol device mode (Ctrl+Shift+M) mengubah area tampilan menjadi layar perangkat yang ukurannya dapat digeser, lengkap dengan pilihan dimensi umum seperti telepon dan tablet. Panel ini mempermudah pengecekan cepat bagaimana layout berperilaku pada lebar sempit — misalnya apakah kolom terlalu sesak. Perlu diingat, device mode adalah emulasi viewport: ia mengubah ukuran area gambar, tetapi tidak meniru sentuhan, performa, maupun keanehan perangkat asli. Untuk pengujian sungguhan, tetap gunakan perangkat atau browser di perangkat tersebut.