Chrome DevTools shortcuts to improve development efficiency ~~ selected some personal less use, leave these are very common, hope to help you. For details, please refer to the keyboard Shortcut reference.
This page provides reference information about keyboard shortcuts in Chrome DevTools. Some shortcuts are available globally, while others are specific to a single panel.
You can also find shortcut keys in the prompt. Hovering over a DevTools UI element displays a hint for that element. If the element has a shortcut key, the prompt contains the shortcut key.
Visit DevTools
| Visit DevTools | On Windows | On the Mac |
|---|---|---|
| Open the Developer Tools | F12, Ctrl + Shift + I | Cmd + Opt + I |
| Open/toggle check element mode and browser window | Ctrl + Shift + C | Cmd + Shift + C |
| Open Developer Tools and focus on the console | Ctrl + Shift + J | Cmd + Opt + J |
| Check the inspector (press after undocking the first one) | Ctrl + Shift + I | Cmd + Opt + I |
Global keyboard shortcuts
The following keyboard shortcuts are available on all DevTools panels:
| Global shortcut key | Windows | Mac |
|---|---|---|
| Check element tool | Ctrl + Shift + C | Cmd + Shift + C |
| Next panel | Ctrl + ] | Cmd + ] |
| Previous panel | Ctrl + [ | Cmd + [ |
| Step back in panel history | Ctrl + Alt + [ | Cmd + Opt + [ |
| Progress in panel history | Ctrl + Alt + ] | Cmd + Opt + ] |
| Change docking position | Ctrl + Shift + D | Cmd + Shift + D |
| Open the Device Mode | Ctrl + Shift + M | Cmd + Shift + M |
| Toggle the console/close the Settings dialog when it opens | Esc | Esc |
| Refresh the page | F5, Ctrl + R | Cmd + R |
| Flush pages that ignore cached content | Ctrl + F5, Ctrl + Shift + R | Cmd + Shift + R |
| Searches for text in the current file or panel | Ctrl + F | Cmd + F |
| Search for text in the source | Ctrl + Shift + F | Cmd + Opt + F |
| Search by filename (except on Timeline) | Ctrl + O, Ctrl + P | Cmd + O, Cmd + P |
| Zoom in (with focus in DevTools) | Ctrl + + | Cmd + Shift + + |
| narrow | Ctrl + – | Cmd + Shift + – |
| Restores the default text size | Ctrl + 0 | Cmd + 0 |
Keyboard shortcuts by panel classification
Elements
| The Elements panel | Windows | Mac |
|---|---|---|
| Undo the changes | Ctrl + Z | Cmd + Z |
| Redo changes | Ctrl + Y | Cmd + Y, Shift + Z |
| navigation | Up key, down key | Up key, down key |
| Expand/collapse the node | Right click, left click | Right click, left click |
| A node | Click on the arrow | Click on the arrow |
| Expand/collapse the node and all its children | Ctrl + Alt + click the arrow icon | Opt + Click the arrow icon |
| Edit properties | Enter, double-click the property | Enter, double-click the property |
| Hidden elements | H | H |
| Switch to HTML editing | F2 |
Styles sidebar
Styles Available shortcut keys in the sidebar:
| Styles sidebar | Windows | Mac |
|---|---|---|
| Edit the rules | Click on the | Click on the |
| Insert new properties | Click on the blank space | Click on the blank space |
| Go to the style rule property declaration line in the source | Ctrl + Click properties | Cmd + click properties |
| Go to the property value declaration line in the source | Ctrl + click on the property value | Cmd + click on the property value |
| Loop through the color definition values | Shift + click on the Color picker box | Shift + click on the Color picker box |
| Edit the next/previous property | Tab, Shift + Tab | Tab, Shift + Tab |
| Increase/decrease the value | Up key, down key | Up key, down key |
| Increase/decrease values in increments of 10 | Shift + Up, Shift + Down | Shift + Up, Shift + Down |
| Increase/decrease values in increments of 10 | PgUp, PgDown | PgUp, PgDown |
| Increase/decrease values in increments of 100 | Shift + PgUp, Shift + PgDown | Shift + PgUp, Shift + PgDown |
| Increase/decrease values in 0.1 increments | Alt + Up, Alt + down | Opt + Up, Opt + Down |
Sources
| Sources panel | Windows | Mac |
|---|---|---|
| Pause/resume script execution | F8, Ctrl + \ | F8, Cmd + \ |
| Skip the next function call | F10, Ctrl + ‘ | F10, Cmd + ‘ |
| Go to the next function call | F11、Ctrl + ; | F11、Cmd + ; |
| Exit current function | Shift + F11, Ctrl + Shift + | Cmd + Shift + F11; |
| Select the next invocation framework | Ctrl + . | Opt + . |
| Select the previous invocation framework | Ctrl + , | Opt + , |
| Switch breakpoint condition | Click the line number, Ctrl + B | Click the line number, Cmd + B |
| Edit breakpoint condition | Right click on the line number | Right click on the line number |
| Delete individual words | Ctrl + Delete | Opt + Delete |
| Adds comments to 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 the line | Ctrl + G | Ctrl + G |
| Search by filename | Ctrl + O | Cmd + O |
| Jump to the line number | Ctrl + P + digital | Cmd + P + digital |
| Jump to the column | Ctrl + O + digital + digital | Cmd + O + digital + digital |
| Go to the members | Ctrl + Shift + O | Cmd + Shift + O |
| Close active tags | Alt + W | Opt + W |
| Run code snippet | Ctrl + Enter | Cmd + Enter |
Inside the code editor
| Code editor | Windows | Mac |
|---|---|---|
| Go to the matching parentheses | Ctrl + M | |
| Jump to the line number | Ctrl + P + digital | Cmd + P + digital |
| Jump to the column | Ctrl + O + digital + digital | Cmd + O + digital + digital |
| Switch the annotation | Ctrl + / | Cmd + / |
| Select the next instance | Ctrl + D | Cmd + D |
| Undo the previous selection | Ctrl + U | Cmd + U |
The console
| Console shortcut | Windows | Mac |
|---|---|---|
| On the recommendation | To the right | To the right |
| Previous command/line | The up key | The up key |
| Next command/line | Down keys | Down keys |
| Focus to the console (you can enter to the console even on other panels) | Ctrl + | Ctrl + |
|
| Clear console | Ctrl + L | Cmd + K, Opt + L |
| Multiline input | Shift + Enter | Ctrl + Return |
Maybe my fingers cramp from my short hands… However, I believe that after this period of convulsion, my debugging speed will definitely improve like flying ~ HOPE to help you too
About the author: Marmot, Reed Technology Web front-end development engineer, representative works: Flying Pavilion small program, gene, YY emoticon red envelope, YY stack square live competition mini game. Good at website construction, public number development, micro channel small program development, small games, public number development, focus on front-end framework, server-side rendering, SEO technology, interaction design, image rendering, data analysis and other research, interested partners to flirt us ~ [email protected]
Visit www.talkmoney.cn to learn more