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: