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 / 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
Global keyboard shortcuts
The following keyboard shortcuts are available in most, if not all, DevTools panels.
Action
Mac
Windows / 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
Search for text within the current panel. Supported only in the Elements, Console, Sources, Performance, Memory, JavaScript Profiler, and Quick Source 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
Elements panel keyboard shortcuts
Action
Mac
Windows / 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
Styles pane keyboard shortcuts
Action
Mac
Windows / Linux
Go to the line where a property value is declared
Hold Command then click the property value
Hold Control then click the property value
Cycle through the RGBA, 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 / Linux
Pause script execution (if currently running) or resume (if currently paused)
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-02-20 UTC."],[],[]]