|
Open whatever panel you used last |
||
or
|
|||
|
Open the Console panel |
Advertisement
These shortcuts are available in most DevTools panels.
|
|||
|
Show settings |
||
or
|
|||
|
Focus the next panel |
||
|
Focus the previous panel |
||
|
Switch back to whatever docking position you last used |
||
|
Toggle Device Mode |
||
|
Toggle Inspect Element mode |
||
|
Open the Command Menu |
||
|
Toggle the drawer |
||
|
Normal reload |
||
or
|
|||
|
Hard reload |
||
or
|
|||
|
Search for text within the current panel |
||
|
Open Search tab in the Drawer, which lets you search for text across all loaded resources |
||
|
Open a file in the Sources panel |
||
or
|
|||
|
Zoom in |
||
|
Zoom out |
||
|
Restore default zoom level |
||
|
then type ! followed by the name of the script, then press Enter: Run snippet |
|
Undo change |
||
|
Redo change |
||
|
Select the element above / below the currently-selected element |
||
|
Expand the currently-selected node. If the node is already expanded, this shortcut selects the element below it |
||
|
Collapse the currently-selected node. If the node is already expanded, this shortcut selects the element above it |
||
|
(on the arrow icon next to the elements name) Expand or collapse the currently-selected node and all of its children |
||
|
Toggle Edit Attributes mode on currently-selected element |
||
|
Select the next / previous attribute after entering Edit Attributes mode |
||
or
|
|||
|
Hide the currently selected element |
||
|
Toggle Edit as HTML mode on the currently-selected element |
|
(on the property value) Go to the line where a property value is declared |
||
|
(on the Color Preview box) Cycle through the RBGA, HSLA, and Hex representations of a color value |
||
|
Use this shortcut after clicking property name or value to select the next / previous property or value |
||
or
|
|||
|
Use this shorcut after clicking a value to increment / decrement a property value by 0.1 |
||
|
Use this shorcut after clicking a value to increment / decrement a property value by 1 |
||
|
Use this shorcut after clicking a value to increment / decrement a property value by 10 |
||
|
Use this shorcut after clicking a value to increment / decrement a property value by 100 |
|
Pause script execution or resume |
||
or
|
|||
|
Step over next function or call |
||
or
|
|||
|
Step into next function call |
||
or
|
|||
|
Step out of current function |
||
or
|
|||
|
Select the call frame below / above the currently-selected frame |
||
or
|
|||
|
Save changes to local modifications |
||
Advertisement |
|||
|
Save all changes |
||
|
Go to line |
||
|
then type : followed by the line number then press |
||
|
then type : followed by the line number then another: then column number then press |
||
|
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) |
||
|
Close the active tab |
|
Delete all characters in the last word, up to the cursor |
||
|
(when cursor is focused on the line) Add or remove a line-of-code breakpoint |
||
|
Go to matching bracket |
||
|
Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line |
||
|
Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously |
||
or
|
|
Start / stop recording |
|
Accept autocomplete suggestion |
||
or
|
|||
|
Reject autocomplete suggestion |
||
|
Get previous statement |
||
|
Get next statement |
||
|
Focus the console |
||
|
Clear the console |
||
|
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary |
||
|
Execute |
||
Hold
|
|||
What is your favorite Chrome DevTools hotkey? Do you have any useful tips for it? Let other users know below.
1082047
486442
404792
345871
293724
268579
12 hours ago
Yesterday
Yesterday
2 days ago
2 days ago Updated!
2 days ago Updated!
Latest articles