Developer ToolsShortcutsWindows

59 Chrome DevTools Keyboard Shortcuts

for Windows

Download Chrome DevTools Shortcuts PDF

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:

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button