# Chrome DevTools Quick Reference

*Elements, Console, Network, Performance, debugging*

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

## Elements

### Inspecting & Editing

| Command | Description |
|---------|-------------|
| `Right-click -> Inspect` | Open Elements panel for element |
| `Double-click tag/attribute` | Edit HTML inline |
| `Delete key` | Delete selected node |
| `Ctrl+Z` | Undo DOM change |
| `H key` | Toggle visibility of selected element |
| `Drag node` | Move element in DOM tree |

### Styles Panel

| Command | Description |
|---------|-------------|
| `element.style {}` | Add inline styles to element |
| `Click property value` | Edit CSS value live |
| `Checkbox next to rule` | Toggle CSS property on/off |
| `:hov button` | Force element pseudo-states (:hover, :focus) |
| `.cls button` | Add/remove CSS classes |
| `Color swatch` | Open color picker |
| `Computed tab` | View final computed CSS values |

## 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");
```

### Console Utilities

| Command | Description |
|---------|-------------|
| `$0` | Currently selected element in Elements |
| `$('sel') / $$('sel')` | querySelector / querySelectorAll shorthand |
| `copy(obj)` | Copy object as string to clipboard |
| `clear()` | Clear console output |
| `monitor(fn)` | Log calls to function fn |
| `monitorEvents(el, 'click')` | Log events on element |
| `keys(obj) / values(obj)` | Object keys / values |
| `$_ ` | Result of last evaluated expression |

### Filtering

| Command | Description |
|---------|-------------|
| `Log levels dropdown` | Filter by verbose/info/warn/error |
| `Filter text box` | Search console output |
| `-url:extension` | Exclude messages by source URL |
| `context: dropdown` | Filter by iframe/worker context |

## Network

### Network Panel Features

| Command | Description |
|---------|-------------|
| `Filter bar` | Filter by type: XHR, JS, CSS, Img, Doc, WS |
| `Search (Ctrl+F)` | Search across all request/response bodies |
| `Preserve log` | Keep log across page navigation |
| `Disable cache` | Bypass browser cache while DevTools open |
| `Throttling dropdown` | Simulate Slow 3G, Fast 3G, Offline |
| `Block request URL` | Right-click request -> Block URL |

### Request Details Tabs

| Command | Description |
|---------|-------------|
| `Headers` | Request/response headers, status code |
| `Payload` | POST body, query parameters |
| `Preview` | Formatted response (JSON, HTML, image) |
| `Response` | Raw response body |
| `Timing` | DNS, connect, TLS, TTFB, download |
| `Initiator` | Stack trace that triggered request |
| `Cookies` | Cookies sent/received |

### Copy & Export

| Command | Description |
|---------|-------------|
| `Right-click -> Copy as cURL` | Copy request as cURL command |
| `Copy as fetch` | Copy as fetch() JavaScript |
| `Export HAR` | Export all requests as HAR file |
| `Copy response` | Copy response body to clipboard |

## Sources

### Breakpoints

| Command | Description |
|---------|-------------|
| `Click line number` | Toggle line breakpoint |
| `Right-click -> Conditional` | Break only when expression is true |
| `Right-click -> Logpoint` | Log without pausing execution |
| `DOM breakpoint` | Break on subtree/attribute/removal |
| `XHR/Fetch breakpoint` | Break when URL contains string |
| `Event listener breakpoint` | Break on specific event types |

### Debugger Controls

| Command | Description |
|---------|-------------|
| `F8 / Ctrl+\` | Resume / Pause execution |
| `F10` | Step over next function call |
| `F11` | Step into function call |
| `Shift+F11` | Step out of current function |
| `Ctrl+Shift+P -> "never pause"` | Disable all breakpoints |

### Debug Panels

| Command | Description |
|---------|-------------|
| `Watch` | Monitor expression values |
| `Scope` | Local, closure, global variables |
| `Call Stack` | Function call chain |
| `Snippets` | Save and run reusable JS code |

## Performance

### Recording

| Command | Description |
|---------|-------------|
| `Record button (Ctrl+E)` | Start/stop recording performance |
| `Reload button` | Record page load performance |
| `Screenshots checkbox` | Capture visual timeline |
| `CPU throttle dropdown` | Simulate 4x/6x CPU slowdown |
| `Network throttle` | Simulate slow network during recording |

### Reading the Flame Chart

| Command | Description |
|---------|-------------|
| `Main track` | JavaScript execution (flame chart) |
| `Network track` | Network requests timeline |
| `Frames track` | FPS and frame durations |
| `Timings track` | FCP, LCP, DCL, Load markers |
| `Yellow bars` | JavaScript (scripting) |
| `Purple bars` | Layout / rendering |
| `Green bars` | Painting / compositing |

### Bottom-Up & Summary

| Command | Description |
|---------|-------------|
| `Summary tab` | Time breakdown: scripting, rendering, etc. |
| `Bottom-Up tab` | Most expensive functions first |
| `Call Tree tab` | Root-to-leaf call hierarchy |
| `Event Log tab` | Chronological event list |

## Application

### Storage

| Command | Description |
|---------|-------------|
| `Local Storage` | View/edit key-value pairs per origin |
| `Session Storage` | View/edit session-scoped storage |
| `IndexedDB` | Inspect object stores and records |
| `Cookies` | View/edit/delete cookies per domain |
| `Cache Storage` | Inspect Service Worker caches |
| `Clear storage` | Bulk clear selected storage types |

### Service Workers & Manifest

| Command | Description |
|---------|-------------|
| `Service Workers` | View registration, status, push/sync |
| `Update on reload` | Force SW update on each reload |
| `Bypass for network` | Skip SW and go to network |
| `Manifest` | View web app manifest details |
| `Offline checkbox` | Simulate offline mode |

## Lighthouse

### Running Audits

| Command | Description |
|---------|-------------|
| `Mode: Navigation` | Full page load audit |
| `Mode: Timespan` | Audit user interactions over time |
| `Mode: Snapshot` | Audit current page state |
| `Categories` | Performance, Accessibility, Best Practices, SEO |
| `Device` | Mobile or Desktop simulation |

### Key Metrics

| Command | Description |
|---------|-------------|
| `FCP (First Contentful Paint)` | Time to first visible content |
| `LCP (Largest Contentful Paint)` | Time to largest visible element |
| `TBT (Total Blocking Time)` | Sum of long task blocking time |
| `CLS (Cumulative Layout Shift)` | Visual stability score |
| `SI (Speed Index)` | How quickly content is visually populated |
| `INP (Interaction to Next Paint)` | Responsiveness to user input |

## Shortcuts

### Opening DevTools

| Command | Description |
|---------|-------------|
| `F12 / Ctrl+Shift+I` | Toggle DevTools open/close |
| `Ctrl+Shift+J` | Open Console panel |
| `Ctrl+Shift+C` | Open Elements + inspect mode |
| `Ctrl+Shift+M` | Toggle device toolbar (responsive) |

### Navigation & Search

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+P` | Command Menu (run any action) |
| `Ctrl+P` | Open file (Go to File) |
| `Ctrl+Shift+F` | Search across all sources |
| `Ctrl+G` | Go to line number in Sources |
| `Ctrl+[ / Ctrl+]` | Switch between panels |

### Editing & Console

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+D` | Toggle DevTools dock position |
| `Ctrl+L (Console)` | Clear console output |
| `Shift+Enter (Console)` | Multi-line input |
| `Esc` | Toggle console drawer |
| `Ctrl+K (Console)` | Clear console |

## Mobile Debug

### Device Toolbar

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+M` | Toggle device toolbar |
| `Device dropdown` | Preset phone/tablet dimensions |
| `Responsive mode` | Freely resize viewport |
| `DPR dropdown` | Change device pixel ratio |
| `Throttling` | Simulate mobile CPU + network |
| `Show media queries` | Visualize CSS breakpoints |

### Remote Debugging (Android)

| Command | Description |
|---------|-------------|
| `1. Enable USB debugging` | Settings -> Developer Options on device |
| `2. Connect USB` | Connect Android device to computer |
| `3. chrome://inspect` | Open in desktop Chrome |
| `4. Click Inspect` | Open DevTools for mobile page |

*Requires Chrome on both desktop and Android device*

### Sensors Override

| Command | Description |
|---------|-------------|
| `Geolocation` | Override GPS coordinates |
| `Orientation` | Simulate device orientation |
| `Touch` | Simulate touch events |
| `Idle detection` | Override idle detection API |

## Common Patterns

### Debug Network Issues

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

### Performance Workflow

| Command | Description |
|---------|-------------|
| `1. Lighthouse audit` | Identify top performance issues |
| `2. Performance recording` | Find long tasks in flame chart |
| `3. Coverage tab` | Find unused CSS/JS (Ctrl+Shift+P -> Coverage) |
| `4. Network waterfall` | Identify blocking resources |
| `5. Rendering tab` | Visualize paint/layout (Ctrl+Shift+P -> Rendering) |

### Useful Console Snippets

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