📖 Guide
Chrome DevTools — Complete Reference
Essential Chrome DevTools shortcuts, Console API, debugging techniques, and workflows for web developers.
83 commands across 9 categories
Elements PanelConsoleNetworkSources & DebuggingPerformanceApplicationKeyboard ShortcutsConsole APICommon Workflows
Elements Panel
| Command | Description |
|---|---|
Ctrl+Shift+C | Toggle inspect element mode — click any element to select it |
F2 (on selected element) | Edit selected element as HTML |
H | Toggle visibility of selected element (adds visibility: hidden) |
Delete | Delete the selected DOM node |
Ctrl+Z | Undo DOM modification |
Right-click > Force state | Force element pseudo-state (:hover, :active, :focus, :visited) |
Right-click > Break on | Set DOM breakpoint for subtree modifications, attribute changes, or node removal |
Ctrl+F in Elementse.g. Search: .my-class or //div[@id='app'] | Search DOM by string, CSS selector, or XPath |
Computed tab | View final computed CSS values and which rules contributed to each property |
Layout tab | Visualize CSS Grid and Flexbox layouts with overlay badges |
Console
| Command | Description |
|---|---|
Ctrl+Shift+J | Open DevTools directly to the Console panel |
$0 | Reference the currently selected element in the Elements panel |
$('selector')e.g. $('.my-class') | Shorthand for document.querySelector() |
$$('selector') | Shorthand for document.querySelectorAll(), returns a real array |
$_ | Reference the result of the last evaluated expression |
$x('xpath')e.g. $x('//div[@class="test"]') | Evaluate an XPath expression against the document |
copy(object) | Copy any object or value to clipboard as a string |
Ctrl+L | Clear the console |
Right-click > Save as | Save console output to a file |
Preserve log checkbox | Keep console output across page navigations |
Network
| Command | Description |
|---|---|
Ctrl+Shift+J | Open DevTools to Console panel |
Filter bar | Filter by type: XHR, JS, CSS, Img, Media, Font, Doc, WS, Manifest, Other |
filter: keywordse.g. -extension:.js or /api\/v[12]/ | Text filter supports negation and regex |
Throttling dropdown | Simulate network conditions: Slow 3G, Fast 3G, Offline, or custom profiles |
Disable cache checkbox | Bypass browser cache while DevTools is open |
Right-click > Copy as cURL | Copy any request as a cURL command for terminal replay |
Right-click > Copy as fetch | Copy request as a JavaScript fetch() call |
Block request URL | Right-click a request to block its domain or specific URL pattern |
Waterfall column | Visualize request timing: DNS, TCP, TLS, TTFB, content download |
HAR export | Export all network activity as a HAR file for sharing/analysis |
Sources & Debugging
| Command | Description |
|---|---|
Ctrl+P | Quick-open any file by name (fuzzy search) |
Ctrl+Shift+P | Open Command Menu for all DevTools actions |
F8 | Pause/Resume script execution |
F10 | Step over — execute current line and move to next |
F11 | Step into — enter the function call on current line |
Shift+F11 | Step out — run to end of current function and return to caller |
Ctrl+Shift+O | Go to symbol/function in current file |
Conditional breakpointe.g. Break only when: user.id === 42 | Right-click line number > Add conditional breakpoint |
Logpointe.g. Logpoint: 'user:', user.name | Right-click line number > Add logpoint — logs without pausing |
Ctrl+G | Go to a specific line number in the current file |
Performance
| Command | Description |
|---|---|
Ctrl+E | Start/stop performance recording |
CPU throttling | Simulate slower CPU: 4x or 6x slowdown for mobile testing |
Screenshots checkbox | Capture screenshots during recording to visualize rendering timeline |
Main thread flame chart | Identify long tasks (>50ms) shown with red corner indicators |
Bottom-Up / Call Tree / Event Log | Three views for analyzing where time is spent |
Web Vitals lane | View LCP, FID, CLS markers directly on the timeline |
Layers panel | Visualize compositing layers and identify unnecessary layer creation |
Application
| Command | Description |
|---|---|
Local Storage | View, edit, and delete localStorage key-value pairs |
Session Storage | View, edit, and delete sessionStorage key-value pairs |
Cookies | Inspect, edit, and delete cookies per domain with all attributes |
IndexedDB | Browse IndexedDB databases, object stores, and individual records |
Cache Storage | Inspect Service Worker cache entries and their responses |
Service Workers | View registered workers, force update, trigger push, or unregister |
Clear storage | Selectively clear storage types and unregister service workers |
Manifest | Inspect Web App Manifest for PWA install requirements |
Keyboard Shortcuts
| Command | Description |
|---|---|
F12 / Ctrl+Shift+I | Toggle DevTools open/closed |
Ctrl+Shift+C | Open DevTools in Inspect Element mode |
Ctrl+Shift+M | Toggle device toolbar (responsive design mode) |
Ctrl+[ / Ctrl+] | Switch between DevTools panels (left/right) |
Ctrl+Shift+D | Toggle DevTools dock position (side/bottom/undocked) |
Esc | Toggle the Console drawer in any panel |
Ctrl+Shift+P | Command Menu — search all DevTools actions and settings |
Ctrl+F | Search within the current panel (Elements, Sources, Network, etc.) |
Console API
| Command | Description |
|---|---|
console.log()e.g. console.log('%cStyled', 'color: red; font-size: 20px') | Standard output — supports string substitution and CSS styling |
console.error() | Output error message with stack trace and red styling |
console.warn() | Output warning message with yellow styling |
console.table()e.g. console.table([{name: 'Alice', age: 30}, {name: 'Bob', age: 25}]) | Display array/object data as a sortable table |
console.group() / groupEnd() | Create collapsible groups of log messages |
console.time() / timeEnd()e.g. console.time('fetch'); await fetch(url); console.timeEnd('fetch') | Measure execution time between two points |
console.count()e.g. console.count('render') // render: 1, render: 2, ... | Log the number of times this line/label has been called |
console.dir() | Display an interactive list of object properties (useful for DOM elements) |
console.assert()e.g. console.assert(x > 0, 'x must be positive') | Log an error only if the assertion is false |
console.trace() | Output a stack trace from the current point |
Common Workflows
| Command | Description |
|---|---|
Emulate mobile | Ctrl+Shift+M > select device > throttle CPU/network for realistic testing |
Debug event listeners | Elements > Event Listeners tab > check 'Ancestors' to see all listeners |
Monitor function calls | Console: monitor(fn) logs every call to that function with arguments |
Override files locally | Sources > Overrides > Select folder > edit any file for local testing |
Screenshot node | Right-click element > Capture node screenshot |
Full page screenshot | Ctrl+Shift+P > 'Capture full size screenshot' |
Design mode | Console: document.designMode = 'on' — makes entire page editable |
Replay XHR | Network > right-click any XHR request > Replay XHR |
Snippets | Sources > Snippets > create reusable JS scripts that persist across sessions |
Coverage | Ctrl+Shift+P > 'Show Coverage' — find unused CSS and JS |
📖 Free, searchable command reference. Bookmark this page for quick access.