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