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 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.
at the top-right of your browser window, then select Tools > Developer Tools.| 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)
- Clear console
Styles Sidebar
| Windows / Linux | Mac | |
|---|---|---|
| Edit rule | Single-click | Single-click |
| Insert new property | Single-click on whitespace | Single-click on whitespace |
| 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 text on current line | Ctrl + D | Cmd + D |
| Save changes to local modifications | Ctrl + S | Cmd + S |
| Go to line | Ctrl + G | Cmd + G |
| Search by filename | Ctrl + O | Cmd + O |
| 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:
- XMLHTTPRequest logging: Turn on to view the XHR log
- Preserve log upon navigation
- Filter: Hide and unhide messages from script files
- Clear console: Clear all console messages
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 |
