Chrome DevTools Keyboard Shortcuts
Opening DevTools
| command + option + i | Open whatever panel you used last |
| command + option + j | Open the Console panel |
| command + option + c | Open the Elements panel |
Global shortcuts
| fn + f1 | Show Settings |
| command + ] | Focus the next panel |
| command + [ | Focus the previous panel |
| command + shift + d | Switch back to whatever docking tools used last |
| command + shift + m | Toggle Device Mode |
| command + shift + c | Toggle Inspect Element Mode |
| command + shift + p | Open the Command Menu |
| escape | Toggle the Drawer |
| command + r | Normal reload |
| command + shift + r | Hard reload |
| command + f | Search for text within the current panel. Not supported in the Audits, Application, and Security panels Command + F |
| command + option + f | Opens the Search tab in the Drawer |
| command + o or command + p | Open a file in the Sources panel |
| command + shift + + | Zoom in |
| command + - | Zoom out |
| command + 0 | Restore default zoom level |
| command + o to open the cmd menu, then type !, followed by the name of the script, then enter | Run snippet |
Elements panel
| command + z | Undo change |
| command + shift + z | Redo change |
| up or down | Select the element above / below the currently-selected element |
| right | Expand the currently-selected node. If the node is already expanded, this shortcut selects the element below it |
| left | Collapse the currently-selected node. If the node is already collapsed, this shortcut selects the element above it |
| hold option then click the arrow icon next to the element's name | Expand or collapse the currently-selected node and all of its children |
| enter | Toggle Edit Attributes mode on the currently-selected element |
| tab or shift + tab | Select the next / previous attribute after entering Edit Attributes mode |
| h | Hide the currently-selected element |
| fn + f2 | Toggle Edit as HTML mode on the currently-selected element |
Styles panel
| hold command then click the property value | Go to the line where a property value is declared |
| hold shift then click the col/preview box next to the value | Cycle through the RBGA, HSLA, and Hex representations of a color value |
| click a property name / value then press tab or shift + tab | Select the next / previous property or value |
| click a value then press option + up or option + down | Increment / decrement a property value by 0.1 |
| click a value then press up or down | Increment / decrement a property value by 1 |
| click a value then press shift + up or shift + down | Increment / decrement a property value by 10 |
| click a value then press command + up or command + down | Increment / decrement a property value by 100 |
Sources panel
| f8 or command + \ | Pause script execution (if currently running) or resume (if currently paused) |
| f10 or command + ' | Step over next function call |
| f11 or command + ; | Step into next function call |
| shift + f11 or command + shift + ; | Step out of current function |
| hold command then click the line of code | Continue to a certain line of code while paused |
| control + . or control + , | Select the call frame below / above the currently-selected frame |
| command + s | Save changes to local modifications |
| command + option + s | Save all changes |
| control + g | Go to line |
| command + o to open the cmd menu, type:followed by the line number, then press enter | Jump to a line number of the currently-open file |
| command + o to open the cmd menu, type:then the line number, then another :, then the column number, then enter | Jump to a column of the currently-open file (for example line 5, column 9) |
| command + shift + o then type in the name of the declaration / rule set, / 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) |
| option + w | Close the active tab |
Code Editor
| option + delete | Delete all characters in the last word, up to the cursor |
| focus your cursor on the line and then press command + b | Add or remove a line-of-code breakpoint |
| control + m | Go to matching bracket |
| command + / | Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line |
| command + d or command + u | Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously |
Performance panel
| command + e | Start / stop recording |
| control + s | Save recording |
| command + o | Load recording |
Memory panel
| command + e | Start / stop recording |
Console panel
| right or tab | Accept autocomplete suggestion |
| escape | Reject autocomplete suggestion |
| up | Get previous statement |
| down | Get next statement |
| control + ` | Focus the Console |
| command + k or option + l | Clear the Console |
| command + return | Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary |
| return | Execute |
| hold alt then click expand | Expand all sub-properties of an object that's been logged to the Console |