DevTools has some built-in shortcuts that developers can use to save time during their daily development process. The following lists the corresponding shortcut keys for each shortcut on Windows/Linux and Mac. Some shortcuts are broken up based on where it can be used. Some shortcuts are broken up based on where it can be used.
Open the DevTools
From any Page or application in Google Chrome, you can open DevTools in the following ways:
- Open the Img Chrome menu in the upper right corner of the browser window and choose Tools > Developer Tools.
- Right-click on any page Element and select Inspect Element.
| function | Windows / Linux | Mac |
|---|---|---|
| Open the Chrome DevTools | F12, Ctrl + Shift + I | Cmd + Opt + I |
| Turn on/off the review element mode and browse mode | Ctrl + Shift + C | Cmd + Shift + C |
| Open Chrome DevTools and focus on the Console | Ctrl + Shift + J | Cmd + Opt + J |
| Censor (undock the first censor before pressing the button) | Ctrl + Shift + J | Cmd + Opt + J |
When the Chrome DevTools window is open, press “?” Or the F1 key opens the General Settings dialog. Press Esc to close the Settings dialog box.
All panel
| function | Windows / Linux | Mac |
|---|---|---|
| Open the General Settings dialog box | ? , F1 | ? |
| Next panel | Ctrl + ] | Cmd + ] |
| Previous panel | Ctrl + [ | Cmd + [ |
| Label history back | Ctrl + Alt + [ | Cmd + Alt + [ |
| Tag history forward | Ctrl + Alt + ] | Cmd + Alt + ] |
| Jump to tabs 1-9 (Services need to be enabled in Settings dialog) | Ctrl + 1-9 | Cmd + 1-9 |
| Open/close Console or close the Settings dialog box | Esc | Esc |
| Refresh the page | F5, Ctrl + R | Cmd + R |
| Force a page refresh to clear cached content | Ctrl + F5, Ctrl + Shift + R | Cmd + Shift + R |
| Current file or TAB search text | Ctrl + F | Cmd + F |
| Search for text in all resources | Ctrl + Shift + F | Cmd + Alt + F |
| Search for files (except the Timeline panel) | Ctrl + O, Ctrl + O | Cmd + O, Cmd + O |
| Restore the default font size | Ctrl + 0 | Shift + 0 |
| amplification | Ctrl + + | Shift + + |
| narrow | Ctrl + – | Shift + – |
Elements panel
| function | Windows / Linux | Mac |
|---|---|---|
| Undo changes | Ctrl + Z | Cmd + Z |
| Restore the changes | Ctrl + Y | Cmd + Y, Cmd + Shift + Z |
| navigation | Up, Down | Up, Down |
| Expansion element | Right, Left | Right, Left |
| An element | Click an HTML tag | Click an HTML tag |
| Edit element attributes | Enter, double-click the property | Enter, double-click the property |
| Hidden elements | H | H |
| Switch to EDIT to HTML | F2 |
When you right-click on an element you can do:
- Force elements in a pseudo-class state: (:active, :hover, : Focus, :visited)
- Set breakpoints for elements (child element modification, attribute change, element deletion)
- Remove the console
Styles sidebar
| function | Windows / Linux | Mac |
|---|---|---|
| Edit the rules | Click on the | Click on the |
| Add new properties | Click in the blank area | Click in the blank area |
| Jump to the number of lines in the stylesheet for the style rule property | Ctrl + Click a CSS property | Cmd + Click a CSS property |
| Jump to the number of lines of the property value in the stylesheet | Ctrl + Click a CSS property value | Cmd + Click a CSS property value |
| The loop color defines the value | Shift + click the color picker | Shift + click the color picker |
| View autofill suggestions | Ctrl + space | Cmd + space |
| Edit the next/previous property | Tab, Shift + Tab | Tab, Shift + Tab |
| Increase/decrease property values | Up, Down | Up, Down |
| Increase/decrease attribute value (min. 10) | Shift + Up, Shift + Down | Shift + Up, Shift + Down |
| Increase/decrease attribute value (min. 10) | PgUp, PgDown | PgUp, PgDown |
| Increase/decrease attribute value (min. 100) | Shift + PgUp, Shift + PgDown | Shift + PgUp, Shift + PgDown |
| Increase/decrease attribute value (min. 0.1) | Alt + Up, Alt + Down | Opt + Up, Opt + Down |
(img)[img] (:active, :hover, : Focus, :visited)
[img] adds new CSS style rules
Resources panel
| function | Windows / Linux | Mac |
|---|---|---|
| Interrupt/resume script execution | F8, Ctrl + \ | F8, Cmd + \ |
| Skip the next function | F10, Ctrl + ‘ | F10, Cmd + ‘ |
| Jump to the next function | F11, Ctrl + ; | F11, Cmd + ; |
| Exit current function | Shift + F11, Ctrl + Shift + ; | Shift + F11, Cmd + Shift + ; |
| Select next call frame | Ctrl + . | Opt + . |
| Select previous call frame | Ctrl + , | Opt + , |
| Switching breakpoint status | Click the number of rows, Ctrl + B | Click the number of rows, Cmd + B |
| Edit breakpoint adjustment | Right-click the number of rows | Right-click the number of rows |
| Delete individual words | Alt + Delete | Opt + Delete |
| Comment a line or select text | Ctrl + / | Cmd + / |
| Save your changes locally | Ctrl + S | Cmd + S |
| Save all changes | Ctrl + Shift + S | Cmd + Shift + S |
| Jump to a row | Ctrl + G | Ctrl + G |
| Search for files by filename | Ctrl + O | Cmd + O |
| Jump to line number Jump to line number | Ctrl + P + : | Cmd + P + : |
| Jump to a column | Ctrl + O + : + : | Cmd + O + : + : |
| Open the member | Ctrl + Shift + O | Cmd + Shift + O |
| Toggle console and evaluate (evaluate?) Selected code in the Sources panel | Ctrl + Shift + E | Cmd + Shift + E |
| Closes the currently active TAB | Alt + W | Opt + W |
| Run snippets | Ctrl + Enter | Cmd + Enter |
| Switch the annotation | Ctrl + / | Cmd + / |
[img] Don’t pause on exceptions
(img)[img] pause on All Exceptions (including those caught in try/catch blocks)
[img] pause on Uncaught Exceptions (normal is the one you want)
Timeline Panel
| function | Windows / Linux | Mac |
|---|---|---|
| Enable/disable recording | Ctrl + E | Cmd + E |
| Save the timeline data | Ctrl + S | Cmd + S |
| Load the timeline data | Ctrl + O | Cmd + O |
Profiles Panel
| function | Windows / Linux | Mac |
|---|---|---|
| Enable/disable recording | Ctrl + E | Cmd + E |
Console
| function | Windows / Linux | Mac |
|---|---|---|
| Next suggestion | Tab | Tab |
| Last tip | Shift + Tab | Shift + Tab |
| On the recommendation | Right | Right |
| Previous command/line | Up | Up |
| Next command/line | Down | Down |
| Clear console records | Ctrl + L | Cmd + K, Opt + L |
| Multiline input | Shift + Enter | Ctrl + Return |
| perform | Enter | Return |
Right-click on the console:
- XMLHTTPRequest Records: Open to view XHR records
- Preserve log upon navigation
- Filter: Hides or displays all messages from script files
- Clear console: Clears all console messages
Screencasting
| function | Windows / Linux | Mac |
|---|---|---|
| View fine tuning to zoom in or out | Alt + Scroll,Ctrl + Cick and drag with two fingers | Opt + Scroll, Cmd + Cick and drag with two fingers |
| Review element tool | Ctrl + Shift + C | Cmd + Shift + C |
simulation
| function | Windows / Linux | Mac |
|---|---|---|
| View fine tuning to zoom in or out | Shift + Scroll | Shift + Scroll |
Other Chrome shortcuts
The following Chrome shortcuts are useful for everyday use and were not specifically developed for DevTools. Check out all of them.
| function | Windows / Linux | Mac |
|---|---|---|
| Looking for the next one | Ctrl + G | Cmd + G |
| Look for the previous one | Ctrl + Shift + G | Cmd + Shift + G |
| Opens a new window in Stealth mode | Ctrl + Shift + N | Cmd + Shift + N |
| Turn on or off the bookmarks bar | Ctrl + Shift + B | Cmd + Shift + B |
| Viewing Historical Records | Ctrl + H | Cmd + Y |
| Viewing download Records | Ctrl + J | Cmd + Shift + J |
| View task Manager | Shift + ESC | Shift + ESC |
| TAB to browse to the next page in history | Alt + Right | Alt + Right |
| TAB to view the previous page in history | Backspace, Alt + Left | Backspace, Alt + Left |
| Highlight address bar contents | F6, Ctrl + L, Alt + D | Cmd + L, Alt + D |
| Enter one in the address bar? Use it as your default search engine | Ctrl + K, Ctrl + E | Cmd + K, Cmd + E |