59 Chrome DevTools Keyboard Shortcuts

Learn Chrome DevTools Shortcuts for Windows

Most used Chrome DevTools Shortcuts

ActionChrome DevTools Shortcuts
Show settingsF1
Focus on the next panelCtrl + ]
Focus on the previous panelCtrl + [
Switch back to whatever docking position you last usedCtrl + Shift + D
Toggle Device ModeCtrl + Shift + M
Toggle Inspect Element modeCtrl + Shift + C
Open the Command MenuCtrl + Shift + P
Toggle the drawerEsc
Normal reloadF5
Hard reloadCtrl + F5
Search for text within the current panelCtrl + F
Open the Search tab in the Drawer, which lets you search for text across all loaded resourcesCtrl + Shift + F
Open a file in the Sources panelCtrl + O
Zoom inCtrl + Shift + +
Zoom outCtrl + Shift + –
Restore the default zoom levelCtrl + 0
then type! followed by the name of the script, then press Enter: Run snippetCtrl + O
Open whatever panel you used lastF12
Open the Console panelCtrl + Shift + J
Start/stop recordingCtrl + E
Save recordingCtrl + S
O Load recordingCtrl + O

Sources Panel Shortcuts

ActionChrome DevTools Shortcut keys
Pause script execution or resumeF8
Step over next function or callF10
Step into the next function callF11
Step out of the current functionShift + F11
Select the call frame below/above the currently selected frameCtrl + .
Save changes to local modificationsCtrl + S
Save all changesCtrl + Alt + S
Go to lineCtrl + G
then type: followed by the line number then press Enter: Jump to a line number of the currently open fileCtrl + O
then type: followed by the line number then another: then column number press Enter: Jump to a column of the currently-open fileCtrl + 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 tabAlt + W

Code Editor Shortcuts

ActionChrome DevTools Shortcuts
Delete all characters in the last word, up to the cursorCtrl + Delete
(when the cursor is focused on the line) Add or remove a line-of-code breakpointCtrl + B
Go to the matching bracketCtrl + M
Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each lineCtrl + /
Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneouslyCtrl + D

Console Panel Shortcuts

ActionChrome DevTools Shortcut Keys
Accept autocomplete suggestionRight Arrow key
Reject autocomplete suggestionEsc
Get the previous statementUp Arrow key
Get next statementDown Arrow key
Focus the consoleCtrl + `
Clear the consoleCtrl + L
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessaryShift + Enter
ExecuteEnter

Elements Panel Shortcuts

ActionChrome DevTools Shortcut keys
Undo changeCtrl + Z
Redo changeCtrl + Y
Select the element above the currently selected elementUp Arrow key
Select the element below the currently selected elementDown Arrow key
Expand the currently selected node. If the node is already expanded, this shortcut selects the element below itRight Arrow key
Collapse the currently selected node. If the node is already expanded, this shortcut selects the element above itLeft Arrow key
Toggle Edit Attributes mode on the currently selected elementEnter
Select the next attribute after entering Edit Attributes modeTab
Select the previous attribute after entering Edit Attributes modeShift + Tab
Hide the currently selected elementH
Toggle Edit as HTML mode on the currently selected elementF2

READ NEXT:

Back to top button