Keyboard shortcuts
this dok in SolidOS ( Operating System for Solid )
- Modified
- Derived On
- License
- CC BY-SA 4.0
Published on
Kayce Basques
Technically, I'm a writer
Table of contents
Table of contents
This page is a reference of keyboard shortcuts in Chrome DevTools.
You can also find shortcuts in tooltips. Hover over a UI element of DevTools to display its tooltip. If the element has a shortcut, the tooltip includes it.
Keyboard shortcuts for opening DevTools #
To open DevTools, press the following keyboard shortcuts while your cursor is focused on the browser viewport:
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Open whatever panel you used last | Command+Option+I | F12 or Control+Shift+I |
| Open the Console panel | Command+Option+J | Control+Shift+J |
| Open the Elements panel | Command+Shift+C or Command+Option+C | Control+Shift+C |
this dok in SolidOS ( Operating System for Solid )
Global keyboard shortcuts #
The following keyboard shortcuts are available in most, if not all, DevTools panels.
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Show Settings | ? or Function+F1 | ? or F1 |
| Focus the next panel | Command+] | Control+] |
| Focus the previous panel | Command+[ | Control+[ |
| Switch back to whatever docking position you last used. If DevTools has been in its default position for the entire session, then this shortcut undocks DevTools into a separate window | Command+Shift+D | Control+Shift+D |
| Toggle Device Mode | Command+Shift+M | Control+Shift+M |
| Toggle Inspect Element Mode | Command+Shift+C | Control+Shift+C |
| Open the Command Menu | Command+Shift+P | Control+Shift+P |
| Toggle the Drawer | Escape | Escape |
| Normal reload | Command+R | F5 or Control+R |
| Hard reload | Command+Shift+R | Control+F5 or Control+Shift+R |
| Search for text within the current panel. Not supported in the Audits, Application, and Security panels | Command+F | Control+F |
| Opens the Search tab in the Drawer, which lets you search for text across all loaded resources | Command+Option+F | Control+Shift+F |
| Open a file in the Sources panel | Command+O or Command+P | Control+O or Control+P |
| Zoom in | Command+Shift++ | Control+Shift++ |
| Zoom out | Command+- | Control+- |
| Restore default zoom level | Command+0 | Control+0 |
| Run snippet | Press Command+O to open the Command Menu, type ! followed by the name of the script, then press Enter | Press Control+O to open the Command Menu, type ! followed by the name of the script, then press Enter |
this dok in SolidOS ( Operating System for Solid )
Elements panel keyboard shortcuts #
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Undo change | Command+Z | Control+Z |
| Redo change | Command+Shift+Z | Control+Y |
| Select the element above / below the currently-selected element | Up Arrow / Down Arrow | Up Arrow / Down Arrow |
| Expand the currently-selected node. If the node is already expanded, this shortcut selects the element below it | Right Arrow | Right Arrow |
| Collapse the currently-selected node. If the node is already collapsed, this shortcut selects the element above it | Left Arrow | Left Arrow |
| Expand or collapse the currently-selected node and all of its children | Hold Option then click the arrow icon next to the element's name | Hold Control+Alt then click the arrow icon next to the element's name |
| Toggle Edit Attributes mode on the currently-selected element | Enter | Enter |
| Select the next / previous attribute after entering Edit Attributes mode | Tab / Shift+Tab | Tab / Shift+Tab |
| Hide the currently-selected element | H | H |
| Toggle Edit as HTML mode on the currently-selected element | Function+F2 | F2 |
Elements panel keyboard shortcuts #
this dok in SolidOS ( Operating System for Solid )
Styles pane keyboard shortcuts #
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Go to the line where a property value is declared | Hold Command then click the property value | Hold protrol then click the property value |
| Cycle through the RBGA, HSLA, and Hex representations of a color value | Hold Shift then click the Color Preview box next to the value | Hold Shift then click the Color Preview box next to the value |
| Select the next / previous property or value | Click a property name or value then press Tab / Shift+Tab | Click a property name or value then press Tab / Shift+Tab |
| Increment / decrement a property value by 0.1 | Click a value then press Option+Up Arrow / Option+Down Arrow | Click a value then press Alt+Up Arrow / Alt+Down Arrow |
| Increment / decrement a property value by 1 | Click a value then press Up Arrow / Down Arrow | Click a value then press Up Arrow / Down Arrow |
| Increment / decrement a property value by 10 | Click a value then press Shift+Up Arrow / Shift+Down Arrow | Click a value then press Shift+Up Arrow / Shift+Down Arrow |
| Increment / decrement a property value by 100 | Click a value then press Command+Up Arrow / Command+Down Arrow | Click a value then press Control+Up Arrow / Control+Down Arrow |
| Cycle through the degrees (deg), gradians (grad), radians (rad) and turns (turn) representations of an angle value | Hold Shift then click the Angle Preview box next to the value | Hold Shift then click the Angle Preview box next to the value |
| Increment / decrement an angle value by 1 | Click the Angle Preview box next to the value then press Up Arrow / Down Arrow | Click the Angle Preview box next to the value then press Up Arrow / Down Arrow |
| Increment / decrement an angle value by 10 | Click the Angle Preview box next to the value then press Shift+Up Arrow / Shift+Down Arrow | Click the Angle Preview box next to the value then press Shift+Up Arrow / Shift+Down Arrow |
| Increment / decrement an angle value by 15 | Click the Angle Preview box next to the value then press Shift, click / mouse slide on the Angle Clock Overlay | Click the Angle Preview box next to the value then press Shift, click / mouse slide on the Angle Clock Overlay |
Sources panel keyboard shortcuts #
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Pause script execution (if currently running) or resume (if currently paused) | F8 or Command+\ | F8 or Control+\ |
| Step over next function call | F10 or Command+' | F10 or Control+' |
| Step into next function call | F11 or Command+; | F11 or Control+; |
| Step out of current function | Shift+F11 or Command+Shift+; | Shift+F11 or Control+Shift+; |
| Continue to a certain line of code while paused | Hold Command and then click the line of code | Hold Control and then click the line of code |
| Select the call frame below / above the currently-selected frame | Control+. / Control+, | Control+. / Control+, |
| Save changes to local modifications | Command+S | Control+S |
| Save all changes | Command+Option+S | Control+Alt+S |
| Go to line | Control+G | Control+G |
| Jump to a line number of the currently-open file | Press Command+O to open the Command Menu, type : followed by the line number, then press Enter | Press Control+O to open the Command Menu, type : followed the line number, then press Enter |
| Jump to a column of the currently-open file (for example line 5, column 9) | Press Command+O to open the Command Menu, type :, then the line number, then another :, then the column number, then press Enter | Press Control+O to open the Command Menu, type :, then the line number, then another :, then the column number, then press Enter |
| 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) | Press Command+Shift+O, then type in the name of the declaration / rule set, or select it from the list of options | Press Control+Shift+O, then type in the name of the declaration / rule set, or select it from the list of options |
| Close the active tab | Option+W | Alt+W |
this dok in Solid POD
Code Editor keyboard shortcuts #
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Delete all characters in the last word, up to the cursor | Option+Delete | Control+Delete |
| Add or remove a line-of-code breakpoint | Focus your cursor on the line and then press Command+B | Focus your cursor on the line and then press Control+B |
| Go to matching bracket | Control+M | Control+M |
| Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line | Command+/ | Control+/ |
| Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously | Command+D / Command+U | Control+D / Control+U |
this dok in Solid POD
Performance panel keyboard shortcuts #
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Start / stop recording | Command+E | Control+E |
| Save recording | Command+S | Control+S |
| Load recording | Command+O | Control+O |
Memory panel keyboard shortcuts #
| Action | Mac | Windows / GNU/Linux |
|---|---|---|
| Start / stop recording | Command+E | Control+E |
Console panel keyboard shortcuts #
| Action | Mac | Windows / Linux |
|---|---|---|
| Accept autocomplete suggestion | Right Arrow or Tab | Right Arrow or Tab |
| Reject autocomplete suggestion | Escape | Escape |
| Get previous statement | Up Arrow | Up Arrow |
| Get next statement | Down Arrow | Down Arrow |
| Focus the Console | Control+` | Control+` |
| Clear the Console | Command+K or Option+L | Control+L |
| Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary | Command+Return | Shift+Enter |
| Execute | Return | Enter |
| Expand all sub-properties of an object that's been logged to the Console | Hold Alt then click Expand | Hold Alt then click Expand |
Last updated: • Improve article