Chrome DevTools Keyboard Shortcuts

Chrome DevTools

Opening DevTools

command + option + iOpen whatever panel you used last
command + option + jOpen the Console panel
command + option + cOpen the Elements panel

Global shortcuts

fn + f1Show Settings
command + ]Focus the next panel
command + [Focus the previous panel
command + shift + dSwitch back to whatever docking tools used last
command + shift + mToggle Device Mode
command + shift + cToggle Inspect Element Mode
command + shift + pOpen the Command Menu
escapeToggle the Drawer
command + rNormal reload
command + shift + rHard reload
command + fSearch for text within the current panel. Not supported in the Audits, Application, and Security panels Command + F
command + option + fOpens the Search tab in the Drawer
command + o or command + pOpen a file in the Sources panel
command + shift + +Zoom in
command + -Zoom out
command + 0Restore default zoom level
command + o to open the cmd menu, then type !, followed by the name of the script, then enterRun snippet

Elements panel

command + zUndo change
command + shift + zRedo change
up or downSelect the element above / below the currently-selected element
rightExpand the currently-selected node. If the node is already expanded, this shortcut selects the element below it
leftCollapse 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 nameExpand or collapse the currently-selected node and all of its children
enterToggle Edit Attributes mode on the currently-selected element
tab or shift + tabSelect the next / previous attribute after entering Edit Attributes mode
hHide the currently-selected element
fn + f2Toggle Edit as HTML mode on the currently-selected element

Styles panel

hold command then click the property valueGo to the line where a property value is declared
hold shift then click the col/preview box next to the valueCycle through the RBGA, HSLA, and Hex representations of a color value
click a property name / value then press tab or shift + tabSelect the next / previous property or value
click a value then press option + up or option + downIncrement / decrement a property value by 0.1
click a value then press up or downIncrement / decrement a property value by 1
click a value then press shift + up or shift + downIncrement / decrement a property value by 10
click a value then press command + up or command + downIncrement / 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 codeContinue to a certain line of code while paused
control + . or control + ,Select the call frame below / above the currently-selected frame
command + sSave changes to local modifications
command + option + sSave all changes
control + gGo to line
command + o to open the cmd menu, type:followed by the line number, then press enterJump 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 enterJump 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 optionsGo 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 + wClose the active tab

Code Editor

option + deleteDelete all characters in the last word, up to the cursor
focus your cursor on the line and then press command + bAdd or remove a line-of-code breakpoint
control + mGo 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 + uSelect / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously

Performance panel

command + eStart / stop recording
control + sSave recording
command + oLoad recording

Memory panel

command + eStart / stop recording

Console panel

right or tabAccept autocomplete suggestion
escapeReject autocomplete suggestion
upGet previous statement
downGet next statement
control + `Focus the Console
command + k or option + lClear the Console
command + returnForce a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary
hold alt then click expandExpand all sub-properties of an object that's been logged to the Console