Chrome DevTools Keyboard Shortcuts
55+ Chrome DevTools shortcuts for debugging, profiling, and inspecting web pages. Essential for web developers.
Open
| Action | Shortcut |
|---|---|
| Open/close DevTools | |
| Open DevTools | |
| Open Console panel | |
| Open Elements + Inspect mode |
Elements
| Action | Shortcut |
|---|---|
| Select element to inspect | |
| Navigate DOM tree | |
| Expand DOM node | |
| Collapse DOM node | |
| Edit attribute / toggle | |
| Edit as HTML | |
| Toggle element visibility | |
| Delete selected element | |
| Undo DOM change | |
| Redo DOM change | |
| Next attribute in element |
Console
| Action | Shortcut |
|---|---|
| Clear console | |
| Autocomplete suggestion | |
| Toggle Console drawer | |
| Previous console command | |
| Next console command | |
| Multi-line entry | |
| Clear input |
Sources
| Action | Shortcut |
|---|---|
| Open file (Go to File) | |
| Command Menu (run command) | |
| Go to symbol / function | |
| Go to line number | |
| Select next occurrence | |
| Resume / Pause script execution | |
| Step over | |
| Step into | |
| Step out | |
| Toggle breakpoint on line | |
| Toggle breakpoint (disabled) | |
| Find in file | |
| Search across all sources | |
| Find and replace | |
| Save changes (with Workspaces) | |
| Toggle comment |
Network
| Action | Shortcut |
|---|---|
| Start/stop recording | |
| Clear network log | |
| Search requests | |
| Replay XHR request | |
| Hard reload (clear cache) |
Performance
| Action | Shortcut |
|---|---|
| Start/stop profiling | |
| Record and reload |
General
| Action | Shortcut |
|---|---|
| Toggle dock position | |
| Previous panel | |
| Next panel | |
| Command Menu | |
| Show Settings | |
| Toggle device mode (responsive) | |
| Zoom in DevTools | |
| Zoom out DevTools | |
| Reset DevTools zoom |
Pro tips
Command Menu is a Game Changer
Ctrl+Shift+P (⌘+⇧+P) opens the Command Menu - like VS Code's command palette. Run any DevTools action by name: take screenshots, disable JavaScript, toggle dark mode, and more.
Console is a JavaScript REPL
The Console isn't just for errors. Use it to test code snippets, query the DOM with $0 (selected element), $$('selector') for querySelectorAll, and copy() to copy values to clipboard.
$0 References the Selected Element
In Elements panel, select an element. Then in Console, $0 refers to it. $1 is the previously selected, and so on. Use $0.style.background = 'red' to test styles instantly.
Use Workspaces for Live Editing
Map your local project folder in Sources → Filesystem. Now edits in DevTools save directly to your files. Perfect for CSS tweaking - changes persist after reload.
Throttle Network & CPU
In Network panel, use the throttle dropdown to simulate slow connections (3G, offline). In Performance panel, use CPU throttle. Essential for testing real-world conditions.
Device Mode for Responsive Testing
Ctrl+Shift+M toggles device mode. Test any screen size, simulate touch events, and pick from preset devices. Add custom device dimensions for your target devices.
Frequently asked questions
How do I take a screenshot of a page in DevTools?
Open Command Menu (Ctrl+Shift+P), type 'screenshot'. Choose from: Capture screenshot (viewport), Capture full size screenshot (entire page), Capture node screenshot (selected element), or Capture area screenshot (drag to select).
How do I find which CSS is affecting an element?
Select the element in Elements panel (Ctrl+Shift+C to pick). The Styles pane shows all applied CSS rules in specificity order. Strikethrough = overridden. Computed tab shows the final calculated values. Filter styles with the search box.
How do I debug JavaScript effectively?
In Sources panel, click line numbers to set breakpoints. Use conditional breakpoints (right-click line) for specific conditions. Add 'debugger;' in your code for programmatic breakpoints. Watch expressions and the Scope pane show variable values.
How do I monitor network requests?
Open Network panel, reload the page. Filter by type (XHR, JS, CSS, Img). Click any request to see headers, payload, response, and timing. Right-click → Copy as cURL to reproduce in terminal. Use the Waterfall to identify slow requests.
What is the Performance panel for?
It records runtime performance: JavaScript execution, layout, paint, and compositing. Hit Ctrl+E to record, perform actions, stop recording. Analyze the flame chart to find bottlenecks. Long yellow bars = JS, purple = layout, green = paint.
How do I test accessibility in DevTools?
In Elements panel, select an element and check the Accessibility pane. Use Lighthouse (Audits panel) for a full accessibility audit. The 'Rendering' tab (Command Menu → 'Show Rendering') can simulate vision deficiencies and forced colors.
Want to master Chrome DevTools?
Go beyond shortcuts with in-depth Chrome DevTools video courses, from the basics all the way to advanced workflows.
Explore Chrome DevTools courses