# Referensi Cepat Chrome DevTools

*Elements, Console, Network, Performance, debugging*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## Elements

### Inspeksi & Edit

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `$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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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)

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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 });
```