Chrome DevTools: Elements Panel

Chrome DevTools adalah kumpulan tool debugging yang sudah built-in di browser Chrome (dan browser berbasis Chromium lainnya). Buka dengan F12 atau Ctrl+Shift+I (Windows/Linux) / Cmd+Opt+I (macOS).

Membuka Elements Panel

1. Tekan F12 → klik tab Elements
2. Atau klik kanan pada elemen → Inspect
3. Atau gunakan shortcut: Ctrl+Shift+C untuk mode select

Apa yang Bisa Dilakukan

1. Inspect HTML Structure

Elements panel menampilkan DOM tree — struktur HTML halaman saat ini (bukan source code asli, tapi hasil setelah JavaScript memodifikasi).

<!-- Kamu bisa melihat: -->
<div class="container">
  <header class="header">
    <h1>Judul</h1>
    <nav>...</nav>
  </header>
  <main>...</main>
</div>

Kamu bisa:

• Expand/collapse node dengan klik panah
• Hover elemen di DOM → highlight di halaman
• Klik elemen di halaman → scroll ke DOM node-nya
• Double-click untuk edit HTML langsung!

2. Edit HTML secara Live

Klik kanan pada elemen → Edit as HTML

Perubahan langsung terlihat di halaman — sangat berguna untuk eksperimen tanpa mengubah kode asli.

Kamu juga bisa:

• Hapus elemen: pilih → tekan Delete
• Pindahkan elemen: drag & drop di DOM tree
• Tambah atribut: double-click pada tag
• Ubah teks: double-click pada teks

3. CSS Styles

Di panel kanan (atau bawah), kamu bisa melihat dan mengedit CSS:

Styles tab:
├── element.style { }          ← inline styles
├── .header { ... }            ← dari stylesheet
├── div { ... }                ← inherited styles
└── user agent stylesheet      ← browser defaults

Fitur:

• Edit property — klik pada value dan ubah
• Toggle property — uncheck checkbox di sebelah kiri
• Tambah property — klik area kosong di rule
• Add new rule — klik tombol + di pojok kanan atas Styles
• Color picker — klik kotak warna untuk visual picker
• Computed tab — lihat nilai CSS final setelah cascade

4. Box Model Visualization

Di tab Computed atau di bawah Styles, ada box model diagram:

┌─────── margin ───────┐
│ ┌───── border ─────┐ │
│ │ ┌─── padding ──┐ │ │
│ │ │   content    │ │ │
│ │ │  200 × 100   │ │ │
│ │ └──────────────┘ │ │
│ └──────────────────┘ │
└──────────────────────┘

Hover di setiap bagian (margin, border, padding, content) → area tersebut di-highlight di halaman.

5. Force Element State

Klik kanan elemen → Force state:

• :hover — simulasikan mouse hover
• :active — simulasikan klik
• :focus — simulasikan focus
• :visited — simulasikan link yang sudah dikunjungi

Sangat berguna untuk men-debug CSS pseudo-class!

6. Accessibility

Tab Accessibility menampilkan:

• ARIA properties
• Role
• Computed accessibility tree

Shortcut yang Berguna

Workflow Debugging CSS

1. Inspect elemen yang bermasalah
2. Lihat Styles — cek apakah property yang diharapkan ada
3. Cek Computed — lihat nilai akhir
4. Cek Box Model — apakah margin/padding sesuai?
5. Toggle property satu per satu untuk isolasi masalah
6. Edit langsung di DevTools sampai benar
7. Copy CSS yang sudah fix ke source code

Tips

• Perubahan di DevTools tidak tersimpan — jangan lupa copy ke source code
• Gunakan $0 di Console untuk mereferensikan elemen yang sedang dipilih di Elements
• Ctrl+Shift+C → klik elemen di halaman adalah cara tercepat untuk inspect