Lewati ke konten utama
menjadi.dev
Chapter 2.5 Fundamental Web Pemula

DevTools: Alat Detektif Browser

Menggunakan Chrome DevTools untuk debug dan analisis

Tujuan Pembelajaran

  • Bisa menggunakan Chrome DevTools untuk debugging
  • Mengerti tab Elements, Console, Network, dan Performance

Analogi

Diagram 

      DevTools = Alat Dokter untuk Website:

Elements = Stetoskop (Lihat struktur)
Console = Termometer (Cek kondisi)
Network = EKG (Lihat aliran data)
Sources = Rontgen (Lihat ke dalam)
Performance = Tes Darah (Analisis)
Application = Riwayat Medis (Storage)

DevTools seperti alat medis — masing-masing punya fungsi spesifik

Penjelasan Konsep

Di awal-awal web, hampir semua orang menggunakan tag <div> untuk segala sesuatu. Butuh header? <div class="header">. Butuh navigasi?

<div class="nav">. Butuh footer? <div class="footer">. Ini berfungsi — browser tetap menampilkannya dengan benar asalkan CSS-nya benar.

Tapi ada masalah besar: komputer tidak mengerti makna di balik <div>. Browser, search engine, dan screen reader (alat bantu tunanetra) semuanya melihat sekumpulan <div> yang tidak punya makna. Mereka tidak tahu mana bagian penting, mana navigasi, mana konten utama.

HTML5 memperkenalkan tag semantic — tag yang namanya sudah menjelaskan maknanya. Ini seperti memberi label pada setiap ruangan di rumah.

Bukan cuma “ruangan A, B, C” tapi “ruang tamu, dapur, kamar tidur, kamar mandi.” Label yang jelas memudahkan semua orang — termasuk Google dan screen reader — untuk memahami struktur website-mu.

Tag Semantic Utama

<header> — Bagian Atas

Digunakan untuk bagian pengenal halaman — biasanya berisi logo, judul situs, dan navigasi utama. Bisa juga digunakan di dalam <article> untuk header artikel (judul + tanggal + penulis).

<nav> — Navigasi

Digunakan KHUSUS untuk blok link navigasi utama — menu utama, breadcrumb, pagination. Bukan untuk semua kumpulan link (seperti link di footer atau daftar link di artikel).

<main> — Konten Utama

Hanya boleh ada SATU <main> per halaman. Berisi konten utama yang unik untuk halaman tersebut.

Konten yang berulang di setiap halaman (seperti header dan footer) tidak masuk <main>.

<article> — Konten Independen

Berisi konten yang bisa berdiri sendiri — posting blog, berita, komentar, kartu produk.

Artinya: kalau konten itu diambil dan dipublikasikan sendiri, masih masuk akal.

<section> — Bagian Tematik

Mengelompokkan konten yang memiliki tema sama.

Biasanya diawali dengan heading.

Contoh: bagian “Testimoni” di landing page, atau bagian “Fitur Utama”.

<aside> — Konten Samping

Berisi konten yang terkait tapi terpisah dari konten utama — sidebar, widget, iklan,

Catatan kaki.

<footer> — Bagian Bawah

Berisi informasi penutup — copyright, link ke kebijakan privasi, kontak, social media links.

<figure> dan <figcaption> — Gambar dengan Keterangan

Mengelompokkan gambar/diagram dengan keterangannya.

Berguna untuk ilustrasi, diagram, foto berita.

<time> — Waktu dan Tanggal

Menandai waktu/tanggal dengan attribute datetime untuk format mesin-readable.

Manfaat Semantic HTML

  1. SEO: Google lebih mudah memahami struktur kontenmu — mana judul, mana penting, mana navigasi. Ini bisa meningkatkan ranking pencarian!
  2. Aksesibilitas: Screen reader bisa memberi navigasi yang lebih baik bagi tunanetra — “Lompat ke konten utama,” “Navigasi,” dll.
  3. Maintainability: Kode lebih mudah dibaca dan dipelihara oleh developer lain (atau dirimu sendiri 6 bulan lagi).
  4. Browser Features: Beberapa browser punya fitur khusus untuk elemen semantic,

Reader mode yang bekerja lebih baik.

Dasar SEO On-Page

SEO (Search Engine Optimization) adalah praktik mengoptimalkan halaman agar muncul di hasil pencarian Google.

Beberapa praktik HTML:

  • Gunakan SATU <h1> per halaman yang deskriptif
  • Gunakan hierarki heading yang benar (h1 → h2 → h3, jangan skip)
  • Isi <meta name="description"> dengan deskripsi menarik (muncul di Google search)
  • Gunakan attribute alt di SEMUA gambar
  • Pastikan URL semantic (/tentang lebih baik dari /page?id=123)
  • Gunakan tag semantic,

Bukan cuma <div>

Semantic HTML bukan cuma “tren” atau “best practice yang boleh diabaikan” — ini adalah standar modern yang membuat web lebih baik untuk semua orang.

Contoh Kode

javascript 
// CONSOLE METHODS
const data = [
  { nama: 'Budi', umur: 25, kota: 'Jakarta' },
  { nama: 'Ani', umur: 23, kota: 'Bandung' }
];

console.table(data);

console.group('Proses Login');
console.log('Validasi input...');
console.log('Kirim ke server...');
console.groupEnd();

console.time('Loop');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('Loop');

console.warn('Peringatan!');
console.error('Error!');

Penjelasan Kode

Baris 7: console.table untuk data tabel. Baris 10-13: console.group. Baris 16-18: console.time untuk performance. Baris 21-22: warn dan error.

Prompt AI

Jelaskan cara menggunakan debugger di Chrome DevTools Sources tab.

Pertanyaan Reflektif

Buka halaman manapun → DevTools → Network → refresh. Berapa banyak request? Berapa total ukuran data?