The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow. Outlined below is each shortcut and the corresponding key for each on Windows/Linux and Mac. While some shortcuts are globally available across all of the DevTools, others are specific to a single panel, and are broken up based on where it can be used.
Opening DevTools
To access the Developer Tools, on any web page or app in Google Chrome you can use one of these options:
Open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
Right-click on any page element and select Inspect Element.
Windows / Linux
Mac
Open Developer Tools
F12, Ctrl + Shift + I
Cmd + Opt + I
Open / switch from inspect element mode and browser window
Ctrl + Shift + C
Cmd + Shift + C
Open Developer Tools and bring focus to the console
Ctrl + Shift + J
Cmd + Opt + J
Inspect the Inspector (undock first one and press)
Ctrl + Shift + J
Cmd + Opt + J
To open up the General Settings dialog type ? or F1 when the Developer Tools window is open. Press Esc to close the settings dialog.
All Panels
Windows / Linux
Mac
Show General Settings dialog
?, F1
?
Next panel
Ctrl + ]
Cmd + ]
Previous panel
Ctrl + [
Cmd + [
Backward in panel History
Ctrl + Alt + [
Cmd + Alt + [
Forward in panel history
Ctrl + Alt + ]
Cmd + Alt + ]
Jump to panel 1-9 (when enabled in General Settings)
Ctrl + 1-9
Cmd + 1-9
Toggle Console / close settings dialog when open
Esc
Esc
Refresh the page
F5, Ctrl + R
Cmd + R
Refresh the page ignoring cached content
Ctrl + F5, Ctrl + Shift + R
Cmd + Shift + R
Text search within current file or panel
Ctrl + F
Cmd + F
Text search across all sources
Ctrl + Shift + F
Cmd + Alt + F
Search by filename (except on Timeline)
Ctrl + O, Ctrl + O
Cmd + O, Cmd + O
Restore default text size
Ctrl + 0
Shift + 0
Zoom in
Ctrl + +
Shift + +
Zoom out
Ctrl + –
Shift + –
Elements Panel
Windows / Linux
Mac
Undo change
Ctrl + Z
Cmd + Z
Redo change
Ctrl + Y
Cmd + Y, Cmd + Shift + Z
Navigate
Up, Down
Up, Down
Expand / collapse node
Right, Left
Right, Left
Expand node
Single-click on tag
Single-click on tag
Edit attribute
Enter, Double-click on attribute
Enter, Double-click on attribute
Hide element
H
H
Toggle edit as HTML
F2
Right-clicking an element you can:
Force element psuedo states: (:active, :hover, :focus, :visited)
Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal)
