Google Chrome Developer Tools Keyboard Shortcuts
by
Juniya
Post Updated: March 21, 2024
- Keyboard shortcuts for developers
Hello everybody, how are you all doing on this chilly Friday evening? I am doing fine and I hope you are all doing well as well. I am trying to write some more tutorials and articles for ChromeGeek.com so expect tons more info about your favorite Chrome products this weekend. I am actually excited to release some of my work, I am that proud of myself this time lol, anyway read on…
What Are Chrome Developer 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.
Chrome Opening DevTools
To access the DevTools, 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 + I | Cmd + Opt + I |
Chrome 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 + Opt + [ |
| Forward in panel history | Ctrl + Alt + ] | Cmd + Opt + ] |
| Change docking location | Ctrl + Shift + D | Cmd + Shift + D |
| Open Device Mode | Ctrl + Shift + M | Cmd + Shift + M |
| 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 + Opt + F |
| Search by filename (except on Timeline) | Ctrl + O, Ctrl + O | Cmd + O, Cmd+ O |
| Zoom in (while focused in DevTools) | Ctrl + + | Shift + + |
| Zoom out | Ctrl + – | Shift + – |
| Restore default text size | Ctrl + 0 | Shift + 0 |
Chrome 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 arrow | Single-click on arrow |
| Expand / collapse node and all its children | Ctrl + Alt + Click on arrow icon | Opt + Click on arrow icon |
| 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 pseudo states: (:active, :hover, :focus, :visited)
- Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal)
- Clear console
Chrome 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 |
| Cycle through the color definition value | Shift + Click on color picker box | Shift + Click on color picker box |
| 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
Chrome 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 |
| Comment a line or selected text | Ctrl + / | Cmd + / |
| Save changes to local modifications | Ctrl + S | Cmd + S |
| Save all changes | Ctrl + Alt + S | Cmd + Opt + 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> |
| Jump to column | Ctrl + O + :<number> + :<number> | Cmd + O + :<number> + :<number> |
| Go to member | Ctrl + Shift + O | Cmd + Shift + O |
| Close active tab | Alt + W | Opt + W |
| Run snippet | Ctrl + Enter | Cmd + Enter |
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)
Chrome Code Editor Shortcuts
| Windows / Linux | Mac | |
|---|---|---|
| Go to matching bracket | Ctrl + M | |
| Jump to line number | Ctrl + P + :<number> | Cmd + P + :<number> |
| Jump to column | Ctrl + O + :<number> + :<number> | Cmd + O + :<number> + :<number> |
| Toggle comment | Ctrl + / | Cmd + / |
| Select next occurrence | Ctrl + D | Cmd + D |
| Undo last selection | Ctrl + U | Cmd + U |
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 |
Chrome Profiles Panel
| Windows / Linux | Mac | |
|---|---|---|
| Start / stop recording | Ctrl + E | Cmd + E |
Chrome Console
| Windows / Linux | Mac | |
|---|---|---|
| Accept suggestion | Right | Right |
| Previous command / line | Up | Up |
| Next command / line | Down | Down |
| Focus the Console | Ctrl + ` | Ctrl + ` |
| 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
Chrome Screencasting
| Windows / Linux | Mac | |
|---|---|---|
| Pinch zoom in and out | Alt + Scroll,Ctrl + Click and drag with two fingers | Opt + Scroll, Cmd + Click and drag with two fingers |
| Inspect element tool | Ctrl + Shift + C | Cmd + Shift + C |
Chrome Emulation
| Windows / Linux | Mac | |
|---|---|---|
| Pinch zoom in and out | Shift + Scroll | Shift + Scroll |
Other Chrome Shortcuts You Might Find Useful
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 | Opt + Right |
| Previous page in a tabs browsing history | Backspace, Alt + Left | Backspace, Opt + Left |
| Highlight content in the web address area | F6, Ctrl + L, Alt+ D | Cmd + L, Opt +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 |
For more information check out: Google Support
Other shortcuts: Google Chrome Keyboard Shortcuts for Mac, Google Chrome Keyboard Shortcuts for Windows, Chromebook Keyboard Shortcuts, & Google Chrome Keyboard Shortcuts for Linux
Discover more from Chrome Geek
Subscribe to get the latest posts sent to your email.
