Browser dan DevTools

Ketika sebuah gaya CSS tidak muncul atau tampilannya berbeda dari dugaan, kita membutuhkan alat untuk melihat apa yang sebenarnya terjadi di dalam halaman. Kabar baiknya, alat tersebut sudah tertanam di dalam browser yang kita pakai sehari-hari: DevTools. Pada chapter ini kita mengenal browser modern yang tersedia, cara membuka DevTools, dan panel-panel yang paling sering dipakai untuk pekerjaan CSS.

Browser Modern yang Kita Pakai #

Seluruh contoh pada course ini dirancang berjalan di browser modern mana pun. Empat browser berikut adalah pilihan yang paling umum:

Semua browser di atas gratis dan menyertakan DevTools tanpa instalasi tambahan. Selain pintasan keyboard, DevTools juga selalu bisa dibuka lewat menu browser — nama menunya sedikit berbeda di tiap browser, tetapi fitur yang ditawarkan setara.

Cara Membuka DevTools #

Ada dua cara yang paling praktis:

Pilihan paling berguna untuk pekerjaan CSS adalah klik kanan pada elemen yang menarik perhatian, lalu memilih Inspect. Dengan cara ini DevTools terbuka dan langsung menandai elemen yang diklik pada panel Elements — kita tidak perlu mencarinya manual di antara ratusan baris markup.

Panel yang Paling Relevan untuk CSS #

DevTools memuat banyak panel, tetapi untuk pekerjaan CSS kita akan bergantung pada empat panel berikut:

Panel Styles dan Console akan kita pakai intensif pada chapter Debugging dengan Browser di akhir section ini.

Tata Letak Jendela DevTools #

Saat dibuka dengan mode bawaan, DevTools menempel di sisi kanan jendela browser. Susunannya kurang lebih seperti ini:

┌──────────────────────────────────┬───────────────────────────┐
│                                  │ Elements   Console  Net…  │ ← tab panel
│                                  ├───────────────────────────┤
│         Halaman web              │ <body>                    │
│         yang sedang dibuka       │   <h1 class="judul">…     │
│                                  │   <p>…                    │
│                                  ├───────────────────────────┤
│                                  │ Styles                    │
│                                  │   h1 { color: #1f6f54; }  │
└──────────────────────────────────┴───────────────────────────┘

Area kiri adalah halaman itu sendiri, sedangkan area kanan adalah DevTools dengan tab-tab panel di bagian atasnya. Tombol bergambar di pojok atas DevTools memungkinkan kita memindahkannya ke sisi bawah atau melepaskannya menjadi jendela terpisah — pilih posisi yang paling nyaman bagi layarmu.

Mencoba Pemeriksaan Pertama #

Mari kita praktikkan. Simpan berkas berikut sebagai coba-devtools.html, lalu buka di browser:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan DevTools</title>
</head>
<body>
  <h1>Halo, DevTools!</h1>
  <p>Klik kanan paragraf ini, lalu pilih Inspect.</p>
</body>
</html>

Sekarang klik kanan paragrafnya dan pilih Inspect: panel Elements akan menyorot elemen <p> tersebut, dan panel Styles di bawahnya menampilkan aturan-aturan bawaan meskipun kita belum menulis satu baris CSS pun. Aturan bawaan ini disebut user agent stylesheet dan menjadi tampilan awal setiap halaman sebelum kita mengaturnya.

Ringkasan #

DevTools bawaan browser modern adalah alat wajib untuk bekerja dengan CSS: panel Elements memilih elemen, panel Styles menampilkan aturan yang berlaku, Console melaporkan error, dan Network memantau berkas yang dimuat. Buka DevTools dengan F12 atau klik kanan → Inspect, lalu biasakan memeriksa elemen setiap kali hasil tampilan berbeda dari dugaan. Chapter berikutnya melengkapi perlengkapan kita dengan memilih code editor yang tepat.