Learn Chrome DevTools Shortcuts for Windows
Most used Chrome DevTools Shortcuts
| Action |
Chrome DevTools Shortcuts |
| Show settings |
F1 |
| Focus on the next panel |
Ctrl + ] |
| Focus on the previous panel |
Ctrl + [ |
| Switch back to whatever docking position you last used |
Ctrl + Shift + D |
| Toggle Device Mode |
Ctrl + Shift + M |
| Toggle Inspect Element mode |
Ctrl + Shift + C |
| Open the Command Menu |
Ctrl + Shift + P |
| Toggle the drawer |
Esc |
| Normal reload |
F5 |
| Hard reload |
Ctrl + F5 |
| Search for text within the current panel |
Ctrl + F |
| Open the Search tab in the Drawer, which lets you search for text across all loaded resources |
Ctrl + Shift + F |
| Open a file in the Sources panel |
Ctrl + O |
| Zoom in |
Ctrl + Shift + + |
| Zoom out |
Ctrl + Shift + – |
| Restore the default zoom level |
Ctrl + 0 |
| then type! followed by the name of the script, then press Enter: Run snippet |
Ctrl + O |
| Open whatever panel you used last |
F12 |
| Open the Console panel |
Ctrl + Shift + J |
| Start/stop recording |
Ctrl + E |
| Save recording |
Ctrl + S |
| O Load recording |
Ctrl + O |
Sources Panel Shortcuts
| Action |
Chrome DevTools Shortcut keys |
| Pause script execution or resume |
F8 |
| Step over next function or call |
F10 |
| Step into the next function call |
F11 |
| Step out of the current function |
Shift + F11 |
| Select the call frame below/above the currently selected frame |
Ctrl + . |
| Save changes to local modifications |
Ctrl + S |
| Save all changes |
Ctrl + Alt + S |
| Go to line |
Ctrl + G |
| then type: followed by the line number then press Enter: Jump to a line number of the currently open file |
Ctrl + O |
| then type: followed by the line number then another: then column number press Enter: Jump to a column of the currently-open file |
Ctrl + O |
| then type in the name of the declaration/rule set, or select it from the list of options: Go to a function declaration (if the current file is HTML or a script), or a rule set (if the currently open file is a stylesheet) |
Ctrl + Shift + O |
| Close the active tab |
Alt + W |
Code Editor Shortcuts
| Action |
Chrome DevTools Shortcuts |
| Delete all characters in the last word, up to the cursor |
Ctrl + Delete |
| (when the cursor is focused on the line) Add or remove a line-of-code breakpoint |
Ctrl + B |
| Go to the matching bracket |
Ctrl + M |
| Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line |
Ctrl + / |
| Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously |
Ctrl + D |
Console Panel Shortcuts
| Action |
Chrome DevTools Shortcut Keys |
| Accept autocomplete suggestion |
Right Arrow key |
| Reject autocomplete suggestion |
Esc |
| Get the previous statement |
Up Arrow key |
| Get next statement |
Down Arrow key |
| Focus the console |
Ctrl + ` |
| Clear the console |
Ctrl + L |
| Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary |
Shift + Enter |
| Execute |
Enter |
Elements Panel Shortcuts
| Action |
Chrome DevTools Shortcut keys |
| Undo change |
Ctrl + Z |
| Redo change |
Ctrl + Y |
| Select the element above the currently selected element |
Up Arrow key |
| Select the element below the currently selected element |
Down Arrow key |
| Expand the currently selected node. If the node is already expanded, this shortcut selects the element below it |
Right Arrow key |
| Collapse the currently selected node. If the node is already expanded, this shortcut selects the element above it |
Left Arrow key |
| Toggle Edit Attributes mode on the currently selected element |
Enter |
| Select the next attribute after entering Edit Attributes mode |
Tab |
| Select the previous attribute after entering Edit Attributes mode |
Shift + Tab |
| Hide the currently selected element |
H |
| Toggle Edit as HTML mode on the currently selected element |
F2 |
READ NEXT:
