Chrome DevTools: Elements — Debugging

Chrome DevTools: Elements Panel Chrome DevTools adalah kumpulan tool debugging yang sudah built-in di browser Chrome (dan browser berbasis Chromium lainnya)…

Chrome DevTools adalah kumpulan alat debugging yang sudah ada di dalam Chrome (dan browser lain berbasis Chromium, seperti Edge). Panel Elements-nya menampilkan susunan halaman yang sedang tampil dan CSS tiap elemennya, dan kamu boleh mengubah keduanya langsung. Bayangin denah rumah yang boleh kamu coret pakai pensil: kamu bisa lihat ruang mana ada di dalam ruang mana, mengukur dindingnya, dan mencoba menggeser perabot. Tapi coretan pensil hilang begitu kamu refresh, jadi yang cocok harus kamu pindahkan ke kode aslinya.

🧪 Tebakan cepat: kamu menulis .judul { color: #2563eb; }, tapi judulnya tetap abu-abu pucat, dan di panel Styles baris color itu dicoret. Kenapa? Tebak dulu, jawabannya ada di bagian "Panel Styles: aturan mana yang menang".

Membuka Elements panel

DOM tree: susunan halaman yang sedang hidup

Contoh halamannya:

<html>
  <body>
    <main>
      <section class="hero">
        <h1 id="title" class="judul">Belajar Debugging</h1>
        <a class="btn" href="/mulai">Mulai belajar</a>
      </section>
    </main>
  </body>
</html>

Elements menampilkan ini sebagai DOM tree: pohon elemen yang dibangun browser, bisa dilipat dan dibuka dengan segitiga di kiri. DOM tree adalah keadaan halaman sekarang, termasuk elemen yang ditambahkan JavaScript setelah halaman dimuat. View Page Source cuma menampilkan file HTML aslinya.

Elemen yang dipilih ditandai == $0 di sebelahnya, dan di bagian bawah panel ada breadcrumb, jalur dari akar sampai elemen itu: html body main section.hero h1#title.judul. Klik dua kali teks atau atribut untuk mengubahnya, atau klik kanan lalu Edit as HTML.

Mencari elemen pakai selector

Tekan Ctrl+F (Mac: Cmd+F) di dalam Elements, lalu ketik teks atau CSS selector. #title mencari id, .hero mencari class, h1 mencari nama tag. Elemen pertama yang cocok langsung terpilih.

Latihan meniru cara ini dengan halaman yang ditulis sebagai object { tag, id, class, children }. inspectElement(tree, selector) mengembalikan jalur nama tag dari akar ke elemen pertama yang cocok, seperti breadcrumb:

Selector Yang cocok Jalurnya
#title h1 dengan id title html>body>main>section>h1
.hero section dengan class hero html>body>main>section
h1 tag h1 pertama html>body>main>section>h1
#nope gak ada [], panjangnya 0 
function cocok(node, selector) {
  if (selector.startsWith("#")) return node.id === selector.slice(1);
  if (selector.startsWith(".")) return node.class === selector.slice(1);
  return node.tag === selector;
}

function cari(node, selector, path) {
  const jalur = [...path, node.tag];          // jalur sampai node ini
  if (cocok(node, selector)) return jalur;    // ketemu: berhenti
  for (const anak of node.children || []) {   // belum: cek anaknya satu per satu
    const hasil = cari(anak, selector, jalur);
    if (hasil) return hasil;
  }
  return null;                                // cabang ini gak punya
}

Panel Styles: aturan mana yang menang

Di sebelah DOM tree ada panel Styles: semua aturan CSS yang mengenai elemen terpilih, yang paling kuat di atas. Untuk judul tadi:

.hero h1 { color: #cbd5e1; }   /* menang: 1 class + 1 tag */
.judul   { color: #2563eb; }   /* color dicoret: cuma 1 class */

Kalau dua aturan mengatur property yang sama, yang menang adalah yang selector-nya lebih spesifik: id lebih kuat dari class, class lebih kuat dari tag. .hero h1 punya satu class ditambah satu tag, .judul cuma satu class. Jadi color di .judul kalah dan dicoret. Itu jawaban tebakannya: aturanmu kebaca, tapi dikalahkan aturan lain.

Yang bisa kamu lakukan di Styles:

Computed dan box model

Tab Computed menampilkan nilai akhir setelah semua aturan bertanding, misalnya color: rgb(203, 213, 225). Di atasnya ada gambar box model: kotak berlapis margin, border, padding, lalu konten di tengah. Arahkan kursor ke tiap lapis, dan bagian itu disorot di halaman. Tombol "Mulai belajar" dengan padding: 10px 18px dan border: 2px solid terlihat persis sebagai lapis padding dan border di gambar itu.

Perubahan di DevTools cuma sementara

Semua yang kamu ubah di Elements dan Styles hilang saat halaman dimuat ulang, karena yang kamu ubah cuma salinan di browser, bukan filenya. Pakai DevTools untuk mencoba sampai pas, lalu salin perubahannya ke file CSS atau HTML-mu.

Latihan ini juga mengintip Network

Bagian kedua latihan meringkas daftar request, seperti yang nanti kamu lihat di panel Network. Tiap request punya status code, angka tiga digit jawaban server:

Dari lima request contoh (200, 200, 401, 200, 404), total 5, ok 3, failed 2. byType menghitung per jenis, dengan nama jenisnya sebagai key: byType[r.type] = (byType[r.type] || 0) + 1. Contohnya punya 2 fetch dan 2 img, dan jenis lain seperti xhr dihitung dengan cara yang sama.

⚠️ Jebakan yang sering ketemu

TL;DR: Klik kanan, Inspect adalah cara tercepat membuka Elements dengan elemennya terpilih (atau Ctrl+Shift+C untuk mode inspect). DOM tree menampilkan halaman sekarang, termasuk hasil JavaScript, dan breadcrumb-nya menunjukkan jalur seperti html>body>main>section>h1. Ctrl+F mencari dengan selector: #id, .class, atau tag, dan elemen pertama yang cocok terpilih. Styles menampilkan aturan yang paling kuat di atas, dan property yang kalah dicoret. Computed menunjukkan nilai akhir dan box model. Semua perubahan di DevTools hilang saat refresh. Status code: 2xx berhasil, 3xx pengalihan atau cache, 400 ke atas gagal.

Yang akan kamu pelajari