Opening DevTools
Open whatever panel you used last
|
F12
|
Opening DevTools
Open whatever panel you used last
|
Ctrl + ↑ Shift + I
|
Opening DevTools
Open the Console panel
|
Ctrl + ↑ Shift + J
|
Global shortcuts
Show settings
|
F1
|
Global shortcuts
Show settings
|
?
|
Global shortcuts
Focus the next panel
|
Ctrl + ]
|
Global shortcuts
Focus the previous panel
|
Ctrl + [
|
Global shortcuts
Switch back to whatever docking position you last used
|
Ctrl + ↑ Shift + D
|
Global shortcuts
Toggle Device Mode
|
Ctrl + ↑ Shift + M
|
Global shortcuts
Toggle Inspect Element mode
|
Ctrl + ↑ Shift + C
|
Global shortcuts
Open the Command Menu
|
Ctrl + ↑ Shift + P
|
Console panel
Reject autocomplete suggestion
|
Esc
|
Global shortcuts
Normal reload
|
F5
|
Global shortcuts
Normal reload
|
Ctrl + R
|
Global shortcuts
Hard reload
|
Ctrl + F5
|
Global shortcuts
Hard reload
|
Ctrl + ↑ Shift + R
|
Global shortcuts
Search for text within the current panel
|
Ctrl + F
|
Global shortcuts
Open Search tab in the Drawer, which lets you search for text across all loaded resources
|
Ctrl + ↑ Shift + F
|
Performance panel
O Load recording
|
Ctrl + O
|
Global shortcuts
Open a file in the Sources panel
|
Ctrl + P
|
Global shortcuts
Zoom in
|
Ctrl + ↑ Shift + +
|
Global shortcuts
Zoom out
|
Ctrl + ↑ Shift + -
|
Global shortcuts
Restore default zoom level
|
Ctrl + 0
|
Elements panel
Undo change
|
Ctrl + Z
|
Elements panel
Redo change
|
Ctrl + Y
|
Styles pane
Use this shorcut after clicking a value to increment / decrement a property value by 1
|
↑ ↓
|
Console panel
Accept autocomplete suggestion
|
→
|
Elements panel
Collapse the currently-selected node. If the node is already expanded, this shortcut selects the element above it
|
←
|
Styles pane
(on the property value) Go to the line where a property value is declared
|
Ctrl + Mouse left click
|
Console panel
Execute
|
⤶ Enter
|
Console panel
Accept autocomplete suggestion
|
⭾ Tab
|
Styles pane
Use this shortcut after clicking property name or value to select the next / previous property or value
|
↑ Shift + ⭾ Tab
|
Elements panel
Hide the currently selected element
|
H
|
Elements panel
Toggle Edit as HTML mode on the currently-selected element
|
F2
|
Styles pane
(on the Color Preview box) Cycle through the RBGA, HSLA, and Hex representations of a color value
|
↑ Shift + Mouse left click
|
Styles pane
Use this shorcut after clicking a value to increment / decrement a property value by 0.1
|
Alt + ↑ ↓
|
Styles pane
Use this shorcut after clicking a value to increment / decrement a property value by 100
|
↑ Shift + ↑ ↓
|
Sources panel
Pause script execution or resume
|
F8
|
Sources panel
Pause script execution or resume
|
Ctrl + \
|
Sources panel
Step over next function or call
|
F10
|
Sources panel
Step over next function or call
|
Ctrl + '
|
Sources panel
Step into next function call
|
F11
|
Sources panel
Step into next function call
|
Ctrl + ;
|
Sources panel
Step out of current function
|
↑ Shift + F11
|
Sources panel
Step out of current function
|
Ctrl + ↑ Shift + ;
|
Sources panel
Select the call frame below / above the currently-selected frame
|
Ctrl + .
|
Sources panel
Select the call frame below / above the currently-selected frame
|
Ctrl + ,
|
Performance panel
Save recording
|
Ctrl + S
|
Sources panel
Save all changes
|
Ctrl + Alt + S
|
Sources panel
Go to line
|
Ctrl + G
|
Sources panel
then type in the name of the declaration / rule set, or select it from the list of options: Go to a function declaration (if currently-open file is HTML or a script), or a rule set (if currently-open file is a stylesheet)
|
Cttl + ↑ Shift + O
|
Sources panel
Close the active tab
|
Alt + W
|
Code Editor
Delete all characters in the last word, up to the cursor
|
Ctrl + Del
|
Code Editor
(when cursor is focused on the line) Add or remove a line-of-code breakpoint
|
Ctrl + B
|
Code Editor
Go to matching bracket
|
Ctrl + M
|
Code Editor
Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line
|
Ctrl + /
|
Code Editor
Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously
|
Ctrl + D
|
Code Editor
Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously
|
Ctrl + U
|
Memory panel
Start / stop recording
|
Ctrl + E
|
Console panel
Get previous statement
|
↑
|
Console panel
Get next statement
|
↓
|
Console panel
Focus the console
|
Ctrl + `
|
Console panel
Clear the console
|
Ctrl + L
|
Console panel
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary
|
↑ Shift + ⤶ Enter
|