Elements

Inspeksi & Edit

Right-click -> Inspect	Buka panel Elements untuk elemen tersebut
Double-click tag/attribute	Edit HTML secara inline
Delete key	Hapus node yang dipilih
Ctrl+Z	Undo perubahan DOM
H key	Toggle visibilitas elemen yang dipilih
Drag node	Pindahkan elemen di tree DOM

Panel Styles

element.style {}	Tambah inline style ke elemen
Click property value	Edit nilai CSS secara live
Checkbox next to rule	Toggle properti CSS on/off
:hov button	Paksa pseudo-state elemen (:hover, :focus)
.cls button	Tambah/hapus class CSS
Color swatch	Buka color picker
Computed tab	Lihat nilai CSS akhir yang dihitung

Console

Console API

console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");

Utilitas Console

$0	Elemen yang sedang dipilih di Elements
$('sel') / $$('sel')	Shorthand querySelector / querySelectorAll
copy(obj)	Salin objek sebagai string ke clipboard
clear()	Bersihkan output console
monitor(fn)	Log setiap panggilan fungsi fn
monitorEvents(el, 'click')	Log event pada elemen
keys(obj) / values(obj)	Key / value objek
$_	Hasil evaluasi ekspresi terakhir

Filtering

Log levels dropdown	Filter berdasarkan verbose/info/warn/error
Filter text box	Cari output console
-url:extension	Kecualikan pesan berdasarkan URL sumber
context: dropdown	Filter berdasarkan konteks iframe/worker

Network

Fitur Panel Network

Filter bar	Filter berdasarkan tipe: XHR, JS, CSS, Img, Doc, WS
Search (Ctrl+F)	Cari di semua body request/response
Preserve log	Pertahankan log saat navigasi halaman
Disable cache	Bypass cache browser saat DevTools terbuka
Throttling dropdown	Simulasi Slow 3G, Fast 3G, Offline
Block request URL	Klik kanan request -> Block URL

Tab Detail Request

Headers	Header request/response, status code
Payload	Body POST, parameter query
Preview	Response terformat (JSON, HTML, gambar)
Response	Body response mentah
Timing	DNS, connect, TLS, TTFB, download
Initiator	Stack trace yang memicu request
Cookies	Cookie yang dikirim/diterima

Copy & Export

Right-click -> Copy as cURL	Salin request sebagai perintah cURL
Copy as fetch	Salin sebagai JavaScript fetch()
Export HAR	Export semua request sebagai file HAR
Copy response	Salin body response ke clipboard

Sources

Breakpoint

Click line number	Toggle breakpoint baris
Right-click -> Conditional	Break hanya saat ekspresi bernilai true
Right-click -> Logpoint	Log tanpa menghentikan eksekusi
DOM breakpoint	Break saat subtree/atribut/penghapusan
XHR/Fetch breakpoint	Break saat URL mengandung string tertentu
Event listener breakpoint	Break pada jenis event tertentu

Kontrol Debugger

F8 / Ctrl+\	Resume / Pause eksekusi
F10	Step over fungsi berikutnya
F11	Step into panggilan fungsi
Shift+F11	Step out dari fungsi saat ini
Ctrl+Shift+P -> "never pause"	Nonaktifkan semua breakpoint

Panel Debug

Watch	Pantau nilai ekspresi
Scope	Variabel lokal, closure, global
Call Stack	Rantai panggilan fungsi
Snippets	Simpan dan jalankan kode JS yang bisa digunakan ulang

Performance

Rekaman

Record button (Ctrl+E)	Mulai/hentikan rekaman performa
Reload button	Rekam performa page load
Screenshots checkbox	Tangkap timeline visual
CPU throttle dropdown	Simulasi perlambatan CPU 4x/6x
Network throttle	Simulasi jaringan lambat saat rekaman

Membaca Flame Chart

Main track	Eksekusi JavaScript (flame chart)
Network track	Timeline request jaringan
Frames track	FPS dan durasi frame
Timings track	Penanda FCP, LCP, DCL, Load
Bar kuning	JavaScript (scripting)
Bar ungu	Layout / rendering
Bar hijau	Painting / compositing

Bottom-Up & Summary

Summary tab	Rincian waktu: scripting, rendering, dll.
Bottom-Up tab	Fungsi paling mahal terlebih dahulu
Call Tree tab	Hierarki panggilan root-ke-leaf
Event Log tab	Daftar event secara kronologis

Application

Storage

Local Storage	Lihat/edit pasangan key-value per origin
Session Storage	Lihat/edit storage berbasis sesi
IndexedDB	Inspeksi object store dan record
Cookies	Lihat/edit/hapus cookie per domain
Cache Storage	Inspeksi cache Service Worker
Clear storage	Hapus massal jenis storage yang dipilih

Service Worker & Manifest

Service Workers	Lihat registrasi, status, push/sync
Update on reload	Paksa pembaruan SW setiap reload
Bypass for network	Lewati SW dan langsung ke jaringan
Manifest	Lihat detail web app manifest
Offline checkbox	Simulasi mode offline

Lighthouse

Menjalankan Audit

Mode: Navigation	Audit page load penuh
Mode: Timespan	Audit interaksi pengguna dari waktu ke waktu
Mode: Snapshot	Audit kondisi halaman saat ini
Categories	Performance, Accessibility, Best Practices, SEO
Device	Simulasi Mobile atau Desktop

Metrik Utama

FCP (First Contentful Paint)	Waktu hingga konten pertama terlihat
LCP (Largest Contentful Paint)	Waktu hingga elemen terbesar terlihat
TBT (Total Blocking Time)	Total waktu blocking task panjang
CLS (Cumulative Layout Shift)	Skor stabilitas visual
SI (Speed Index)	Seberapa cepat konten terisi secara visual
INP (Interaction to Next Paint)	Responsivitas terhadap input pengguna

Shortcut

Membuka DevTools

F12 / Ctrl+Shift+I	Toggle buka/tutup DevTools
Ctrl+Shift+J	Buka panel Console
Ctrl+Shift+C	Buka Elements + mode inspeksi
Ctrl+Shift+M	Toggle toolbar perangkat (responsif)

Navigasi & Pencarian

Ctrl+Shift+P	Command Menu (jalankan aksi apa saja)
Ctrl+P	Buka file (Go to File)
Ctrl+Shift+F	Cari di semua sumber
Ctrl+G	Pergi ke nomor baris di Sources
Ctrl+[ / Ctrl+]	Pindah antar panel

Editing & Console

Ctrl+Shift+D	Toggle posisi dock DevTools
Ctrl+L (Console)	Bersihkan output console
Shift+Enter (Console)	Input multi-baris
Esc	Toggle console drawer
Ctrl+K (Console)	Bersihkan console

Debug Mobile

Device Toolbar

Ctrl+Shift+M	Toggle toolbar perangkat
Device dropdown	Dimensi preset ponsel/tablet
Responsive mode	Ubah ukuran viewport bebas
DPR dropdown	Ubah device pixel ratio
Throttling	Simulasi CPU + jaringan mobile
Show media queries	Visualisasikan CSS breakpoint

Remote Debugging (Android)

1. Aktifkan USB debugging	Settings -> Developer Options di perangkat
2. Hubungkan USB	Sambungkan perangkat Android ke komputer
3. chrome://inspect	Buka di Chrome desktop
4. Klik Inspect	Buka DevTools untuk halaman mobile

Membutuhkan Chrome di desktop dan perangkat Android

Override Sensor

Geolocation	Override koordinat GPS
Orientation	Simulasi orientasi perangkat
Touch	Simulasi event sentuh
Idle detection	Override API deteksi idle

Pola Umum

Debug Masalah Jaringan

// In Console: monitor all fetch requests
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};

Alur Kerja Performa

1. Audit Lighthouse	Identifikasi masalah performa utama
2. Rekaman Performance	Temukan long task di flame chart
3. Tab Coverage	Temukan CSS/JS tidak terpakai (Ctrl+Shift+P -> Coverage)
4. Waterfall Network	Identifikasi sumber yang memblokir
5. Tab Rendering	Visualisasi paint/layout (Ctrl+Shift+P -> Rendering)

Snippet Console Berguna

// List all event listeners on element
getEventListeners($0);

// Monitor layout shifts
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });

REFERENSI CEPAT CHROME DEVTOOLS