|
Open whatever panel you used last |
||
or
|
|||
|
Open the Console panel |
Reklama
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 |
||
Reklama |
|||
|
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.
1088766
488887
406639
350558
297279
270003
28 minutes ago
4 hours ago Updated!
4 hours ago Updated!
17 hours ago
17 hours ago
19 hours ago Updated!
Latest articles