Chrome DevTools: Console — Debugging

Chrome DevTools: Console Panel Console panel adalah Swiss Army knife debugging. Selain menampilkan log, kamu bisa menjalankan JavaScript secara interaktif…

Panel Console di DevTools punya dua tugas: menampilkan pesan dari halaman (log, warning, error), dan menjalankan JavaScript yang kamu ketik, langsung di dalam halaman itu. Bayangin walkie-talkie ke orang di dalam rumah: kamu bisa bertanya "ada berapa lampu yang nyala?" atau minta "matikan lampu dapur", dan jawabannya langsung datang. Tapi apa yang kamu ubah lewat walkie-talkie cuma bertahan sampai halaman dimuat ulang. File kodemu gak ikut berubah.

🧪 Tebakan cepat: di Console kamu ketik [1, 2, 3].length, Enter, lalu ketik $_ * 10, Enter. Hasil yang kedua berapa? Tebak dulu, jawabannya ada di bagian "Variabel khusus Console".

Membuka Console

Ctrl+Shift+J (Mac: Cmd+Option+J) membuka DevTools langsung di tab Console.
Kalau kamu sedang di panel lain, misalnya Elements, tekan Esc: Console muncul sebagai laci di bawahnya, jadi kamu bisa memilih elemen sambil mengetik.

Ketik JavaScript, halaman menjawab

Console adalah REPL (Read, Eval, Print, Loop): dia membaca yang kamu ketik, menjalankannya, mencetak hasilnya, lalu menunggu ketikan berikutnya. Kodenya jalan di dalam halaman yang sedang dibuka, jadi dia bisa memakai document dan variabel global halaman itu. Ini tempat terbaik untuk mencoba kode tanpa mengubah file.

Contoh halamannya, daftar tugas dengan tiga item:

<title>Tugas hari ini</title>
<h1>Tugas hari ini</h1>
<ul>
  <li class="selesai">Baca pesan error</li>
  <li>Pasang console.log</li>
  <li>Tulis perbaikan</li>
</ul>

> document.title
<· 'Tugas hari ini'
> document.querySelectorAll("li").length
<· 3
> const jumlah = 3
<· undefined

> adalah yang kamu ketik, <· adalah jawaban Console.
Teks ditampilkan dengan tanda kutip, angka tanpa kutip.
const jumlah = 3 adalah perintah, bukan nilai, jadi jawabannya undefined. Itu normal, bukan error. Variabel jumlah tetap tersimpan.
Sambil mengetik, Console sudah menampilkan pratinjau hasil berwarna abu-abu (eager evaluation). Shift+Enter membuat baris baru tanpa menjalankan, panah atas memanggil perintah sebelumnya.

Variabel khusus Console

Ketik	Artinya
`$0`	elemen yang sedang dipilih di panel Elements (`$1` sampai `$4` pilihan sebelumnya)
`$_`	hasil perintah terakhir
`$("li")`	sama dengan `document.querySelector("li")`
`$("li")`	semua yang cocok, sebagai array (seperti `document.querySelectorAll`)
`copy(nilai)`	menyalin nilai ke clipboard

> $("li").length
<· 3
> $_ * 10
<· 30
> $0
<· <li>Tulis perbaikan</li>
> $0.classList.add("selesai")
<· undefined

$_ berisi hasil terakhir, 3, jadi $_ * 10 hasilnya 30. Itu jawaban tebakannya. Gunanya: kamu gak perlu mengetik ulang atau menyimpan hasil yang panjang ke variabel. $0 di sini adalah item ketiga, yang tadi dipilih di Elements. Setelah classList.add("selesai"), item itu langsung tercoret di halaman, dan jawabannya undefined karena add memang gak mengembalikan apa-apa.

Variabel ini cuma ada di Console. Di file .js, $("li") membuat ReferenceError: $ is not defined. Dan kalau halaman memakai jQuery, $ adalah milik jQuery.

Menyaring pesan

Menu Default levels memilih level yang tampil: Verbose, Info, Warnings, Errors.
Kotak Filter menyembunyikan pesan yang gak mengandung teks yang kamu ketik.
Ctrl+L membersihkan Console.
Di pengaturan Console (ikon roda gigi), Preserve log menjaga pesan supaya gak hilang saat halaman pindah atau dimuat ulang.
Error tampil merah dengan nama file dan nomor baris di kanan. Klik itu, dan panel Sources terbuka tepat di baris tersebut.

💡 Live expression

Ikon mata di atas Console (Create live expression) memasang ekspresi yang dihitung ulang terus. Misalnya document.querySelectorAll("li.selesai").length langsung naik dari 1 ke 2 begitu kamu mencoret satu item, tanpa mengetik ulang.

⚠️ Jebakan yang sering ketemu

Memakai $ atau $ di file kode. Itu bantuan khusus Console. Di kode, pakai document.querySelector dan document.querySelectorAll.
Mengira perubahan dari Console tersimpan. Semua yang kamu ubah hilang saat refresh. Pindahkan yang benar ke file-mu.
Pesan hilang setelah form dikirim. Halaman pindah, Console dibersihkan. Nyalakan Preserve log.
Menempel kode dari orang asing. Kode di Console punya akses ke halaman, termasuk akun yang sedang login. Chrome memperingatkan dan memintamu mengetik allow pasting dulu. Jangan tempel kode yang gak kamu pahami.

TL;DR: Console (Ctrl+Shift+J, atau Esc dari panel lain) menampilkan pesan dan menjalankan JavaScript di dalam halaman, jadi ini tempat terbaik mencoba kode tanpa mengubah file. > yang kamu ketik, <· jawabannya, dan perintah seperti const x = 3 menjawab undefined. Variabel khusus: $0 elemen terpilih di Elements, $_ hasil terakhir, $() dan $() singkatan querySelector dan querySelectorAll, copy() menyalin. Semuanya cuma ada di Console. Saring pesan dengan Default levels dan Filter, nyalakan Preserve log kalau halaman pindah, dan ingat: perubahan dari Console hilang saat refresh.