Keyboard Shortcuts
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 DevTools, on any web page or app in Google Chrome you can use one of these options:
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:
:active
, :hover
, :focus
, :visited
) Styles Sidebar
Windows / Linux | Mac | |
---|---|---|
Edit rule | Single-click | Single-click |
Insert new property | Single-click on whitespace | Single-click on whitespace |
Go to line of style rule property declaration in source | Ctrl + Click on property | Cmd + Click on property |
Go to line of property value declaration in source | Ctrl + Click on property value | Cmd + Click on property value |
Go to line of style rule property declaration in source | Ctrl + Click on property | Cmd + Click on property |
Go to line of property value declaration in source | Ctrl + Click on property value | Cmd + Click on property value |
View auto-complete suggestions | Ctrl + Space | Cmd + Space |
Edit next / previous property | Tab, Shift + Tab | Tab, Shift + Tab |
Increment / decrement value | Up, Down | Up, Down |
Increment / decrement value by 10 | Shift + Up, Shift + Down | Shift + Up, Shift + Down |
Increment / decrement value by 10 | PgUp, PgDown | PgUp, PgDown |
Increment / decrement value by 100 | Shift + PgUp, Shift + PgDown | Shift + PgUp, Shift + PgDown |
Increment / decrement value by 0.1 | Alt + Up, Alt + Down | Opt + Up, Opt + Down |
Emulate an element's pseudo state (:active
, :hover
, :focus
, :visited
)
Add new style selectors
Sources Panel
Windows / Linux | Mac | |
---|---|---|
Pause / resume script execution | F8, Ctrl + \ | F8, Cmd + \ |
Step over next function call | F10, Ctrl + ' | F10, Cmd + ' |
Step into next function call | F11, Ctrl + ; | F11, Cmd + ; |
Step out of current function | Shift + F11, Ctrl + Shift + ; | Shift + F11, Cmd + Shift + ; |
Select next call frame | Ctrl + . | Opt + . |
Select previous call frame | Ctrl + , | Opt + , |
Toggle breakpoint condition | Click on line number, Ctrl + B | Click on line number, Cmd + B |
Edit breakpoint condition | Right-click on line number | Right-click on line number |
Delete individual words | Alt + Delete | Opt + Delete |
Delete individual words | Alt + Delete | Opt + Delete |
Save changes to local modifications | Ctrl + S | Cmd + S |
Go to line | Ctrl + G | Ctrl + G |
Search by filename | Ctrl + O | Cmd + O |
Jump to line number | Ctrl + P + :<number> | Cmd + P + :<number> |
Go to member | Ctrl + Shift + O | Cmd + Shift + O |
Toggle console and evaluate code selected in Sources panel | Ctrl + Shift + E | Cmd + Shift + E |
Run snippet | Ctrl + Enter | Cmd + Enter |
Toggle comment | Ctrl + / | Cmd + / |
Don't pause on exceptions
Pause on All exceptions (including those caught within try/catch blocks)
Pause on uncaught exceptions (usually the one you want)
Timeline Panel
Windows / Linux | Mac | |
---|---|---|
Start / stop recording | Ctrl + E | Cmd + E |
Save timeline data | Ctrl + S | Cmd + S |
Load timeline data | Ctrl + O | Cmd + O |
Profiles Panel
Windows / Linux | Mac | |
---|---|---|
Start / stop recording | Ctrl + E | Cmd + E |
Console
Windows / Linux | Mac | |
---|---|---|
Next suggestion | Tab | Tab |
Previous suggestion | Shift + Tab | Shift + Tab |
Accept suggestion | Right | Right |
Previous command / line | Up | Up |
Next command / line | Down | Down |
Clear Console | Ctrl + L | Cmd + K, Opt + L |
Multi-line entry | Shift + Enter | Ctrl + Return |
Execute | Enter | Return |
Right-clicking on console:
Screencasting
Windows / Linux | Mac | |
---|---|---|
Pinch zoom in and out | Alt + Scroll,Ctrl + Cick and drag with two fingers | Opt + Scroll, Cmd + Cick and drag with two fingers |
Inspect element tool | Ctrl + Shift + C | Cmd + Shift + C |
Emulation
Windows / Linux | Mac | |
---|---|---|
Pinch zoom in and out | Shift + Scroll | Shift + Scroll |
Other Chrome Shortcuts
Here are some additional Chrome shortcuts which are useful for general use within the browser not specific to the DevTools. View all Chrome shortcuts for Windows, Mac, and Linux.
Windows / Linux | Mac | |
---|---|---|
Find next | Ctrl + G | Cmd + G |
Find previous | Ctrl + Shift + G | Cmd + Shift + G |
Open a new window in Incognito mode | Ctrl + Shift + N | Cmd + Shift + N |
Toggle Bookmarks bar on and off | Ctrl + Shift + B | Cmd + Shift + B |
View the History page | Ctrl + H | Cmd + Y |
View the Downloads page | Ctrl + J | Cmd + Shift + J |
View the Task Manager | Shift + ESC | Shift + ESC |
Next page in a tabs browsing history | Alt + Right | Alt + Right |
Previous page in a tabs browsing history | Backspace, Alt + Left | Backspace, Alt + Left |
Highlight content in the web address area | F6, Ctrl + L, Alt + D | Cmd + L, Alt + D |
Places a ? in the address bar for performing a keyword search using your default search engine |
Ctrl + K, Ctrl + E | Cmd + K, Cmd + E |