Chrome DevTools: Console Panel

Console panel adalah Swiss Army knife debugging. Selain menampilkan log, kamu bisa menjalankan JavaScript secara interaktif.

Menjalankan JavaScript

Console adalah REPL (Read-Eval-Print Loop) — kamu bisa mengetik JavaScript dan langsung melihat hasilnya:

// Evaluasi ekspresi
> 2 + 2
< 4

// Akses DOM
> document.title
< "Beranda - BelajarWeb.dev"

> document.querySelectorAll("button").length
< 5

// Manipulasi halaman
> document.body.style.backgroundColor = "red"

Variabel Khusus Console

// Setelah inspect sebuah <button> di Elements:
> $0
< <button class="btn">Submit</button>

> $0.textContent
< "Submit"

> $0.classList.add("active")

// Shortcut querySelector
> $(".header")
< <header class="header">...</header>

> $("a").length  // jumlah semua link
< 42

Filtering Console Output

Di atas Console, ada dropdown filter:

• All — semua pesan
• Errors — hanya console.error dan error JavaScript
• Warnings — hanya console.warn
• Info — hanya console.info
• Verbose — termasuk console.debug

Juga ada text filter — ketik teks untuk filter pesan.

Live Expression

Klik ikon mata (eye) di atas Console untuk membuat Live Expression — ekspresi yang otomatis di-evaluasi secara real-time:

// Contoh live expression:
document.querySelectorAll(".item").length
// Akan terus update saat elemen ditambah/dihapus

Multi-line Code

Tekan Shift+Enter untuk menulis kode multi-baris:

> const users = [
    { nama: "Budi", score: 85 },
    { nama: "Siti", score: 92 },
    { nama: "Andi", score: 78 }
  ];
  users
    .filter(u => u.score >= 80)
    .map(u => u.nama);
< ["Budi", "Siti"]

Copy & Store

// Copy value ke clipboard
> copy(document.title)
// Sekarang bisa paste di mana saja

// Simpan hasil sebagai variable global
// Klik kanan pada value → "Store as global variable"
// Jadi temp1, temp2, dll

// Copy object sebagai JSON
> copy(JSON.stringify(data, null, 2))

Monitor Events

// Monitor semua event pada sebuah elemen
> monitorEvents($0)
// Klik elemen → melihat semua event yang terjadi
// mousedown, mouseup, click, dll

// Monitor event tertentu saja
> monitorEvents($0, "click")

// Berhenti monitor
> unmonitorEvents($0)

Debug Function

// Otomatis pause saat function dipanggil
> debug(functionName)
// Saat functionName() dipanggil → debugger pause

// Berhenti
> undebug(functionName)

Console Settings

Buka Settings (gear icon) di Console:

• Preserve log — jangan hapus log saat navigasi/refresh
• Show timestamps — tampilkan waktu di setiap log
• Eager evaluation — preview hasil saat mengetik
• Selected context only — filter berdasarkan iframe

Tips Console

1. Ctrl+L — bersihkan console
2. Ctrl+Shift+J — buka Console langsung
3. Tekan panah atas — akses history perintah sebelumnya
4. Ketik nama function tanpa () untuk melihat source code-nya
5. Gunakan console.log({variable}) — shorthand untuk menampilkan nama dan nilai