Shortcuts
DevTools has many built-in shortcuts that developers can use in their daily work to save time and increase development efficiency. E
ach shortcut listed below and its corresponding key bits in Windows/Linux and Mac.
Some shortcuts are available at all DevTools, others can only be used in specified single panels, or are disrupted when used.
Open DevTools
To access DevTools, any page or app in Google Chrome, you can use one of these options:
-
Open the
Chrome menu, in the upper right corner of the browser
window, and then select tools and development tools.
-
Right-click and select Check elements in
any page element.
|
Windows
|
Linux
|
Mac
|
|
Open the developer tool
|
F12, Ctrl + Shift + I
|
Cmd + Opt + I
|
|
Switch the review element mode with the browser window mode
|
Ctrl + Shift + C
|
Cmd + Shift + C
|
|
Open DevTools to place the panel in the console
|
Ctrl + Shift + J
|
Cmd + Opt + J
|
|
Check (undock the first one, then press)
|
Ctrl + Shift + I
|
Cmd + Opt + I
|
All panels
|
Windows
|
Linux
|
Mac
|
|
The settings dialog box is displayed
|
?, F1
|
?
|
|
Next panel
|
Ctrl + ]
|
Cmd + ]
|
|
The previous panel
|
Ctrl + [
|
Cmd + [
|
|
The last panel
|
Ctrl + Alt + [
|
Cmd + Opt+ [
|
|
The first panel
|
Ctrl + Alt + ]
|
Cmd + Opt+ ]
|
|
Change the docking position
|
Ctrl + Shift + D
|
Cmd+ Shift + D
|
|
Turn on Device mode
|
Ctrl + Shift + M
|
Cmd + Shift + M
|
|
Switch console/close settings dialog box
|
Esc
|
Esc
|
|
Refresh the page
|
F5, Ctrl + R
|
Cmd + R
|
|
Ignore the cached content to refresh the page
|
Ctrl + F5, Ctrl + Shift + R
|
Cmd + Shift + R
|
|
Search for Chinese in an optional piece or panel
|
Ctrl + F
|
Cmd +F
|
|
Text search in all sources
|
Ctrl +Shift + F
|
Cmd + Opt + F
|
|
Search by file name (except for timeline panel.)
|
Ctrl + O , Ctrl + O
|
Cmd + O , Cmd + O
|
|
Zoom in (when Dev Tools gets the focus)
|
Ctrl + +
|
Shift + +
|
|
Narrow
|
Ctrl + -
|
Shift + -
|
|
Restore the default text size
|
Ctrl + 0
|
Shift + 0
|
Element panel
|
Windows
|
Linux
|
Mac
|
|
Undo the changes
|
Ctrl + Z
|
Cmd +Z
|
|
Redo the changes
|
Ctrl + Y
|
Cmd + Y , Cmd + Shift + Z
|
|
Navigation
|
Up, Down
|
Up , Down
|
|
Expand/collapse nodes
|
Right , Left
|
Right , Left
|
|
Expand the node
|
Single-click on arrow
|
Single-click on arrow
|
|
Expand/collapse nodes and all their subsets
|
Ctrl + Alt + Click on arrow icon
|
Opt + Click on arrow icon
|
|
Edit the property
|
Enter , Double-click on attribute
|
Enter , Double-click on attribute
|
|
Hide the element
|
H
|
H
|
|
Switch editing to HTML
|
F2
|
|
Right-click on an element you can:
-
Change the state of the element (:active,:hover,:focus,:visited);
-
Set break points on elements: (modify child elements, modify properties, delete nodes)
-
Empty the console
Sidebar style
|
Windows
|
Linux
|
Mac
|
|
Open the ruler
|
Click
|
Click
|
|
Insert a new property
|
Click in the blank space
|
Click in the blank space
|
|
Go to the source line in the style rule property declaration
|
Ctrl - Click on the property
|
Cmd - Click on the property
|
|
The transition property value declares the source row
|
Ctrl - Click on the property value
|
Cmd - Click on the property value
|
|
Gets the color definition value
|
Shift - Click on the color picker dialog box
|
Shift - Click on the color picker dialog box
|
|
Edit the previous/last one
|
Tab ,Shift + Tab
|
Tab ,Shift + Tab
|
|
Increase/decrease the value
|
Up , Down
|
Up , Down
|
|
Increase/decrease the value at intervals of 10
|
Shift + Up , Shift + Down
|
Shift +Up , Shift + Down
|
|
Increase/decrease the value at intervals of 10
|
PgUp , PgDown
|
PgUp , PgDown
|
|
Increase/decrease the value at intervals of 100
|
Shift + PgUp , Shift + PgDown
|
Shift + PgUp , Shift + PgDown
|
|
Increase/decrease the value at intervals of 0.1
|
Alt + Up , Alt + Down
|
Opt + Up , Opt + Down
|
-
Simulate the pseudo-state of an element (:active, :hover, :focus, :visited)
-
Add a new style selection
Source panel
|
Windows
|
Linux
|
Mac
|
|
Pause/resume script execution
|
F8 , Ctrl + \
|
F8 , Cmd + \
|
|
Skip the call to the next function
|
F10 , Ctrl +'
|
F10 , Cmd + '
|
|
Go to the call to the next function
|
F11 , Ctrl +;
|
F11 , Cmd + ;
|
|
Jump out of the current function
|
Shift + F11 , Ctrl + Shift + ;
|
Shift + F11 ,Cmd + Shift + ;
|
|
Select the next calling framework
|
Ctrl + .
|
Opt + .
|
|
Select the previous calling framework
|
Ctrl + ,
|
Opt + ,
|
|
Switch break point conditions
|
Click on the line number, Ctrl.B
|
Click on the line number, Cmd plus B
|
|
Edit break point conditions
|
Right-click the line number
|
Hit the line number
|
|
Delete a single set of words
|
Alt + Delete
|
Opt + Delete
|
|
Comment a line or comment on the selected text
|
trl + /
|
Cmd + /
|
|
Save local modifications
|
Ctrl + S
|
Cmd + S
|
|
Jump to the line
|
Ctrl +G
|
Ctrl + G
|
|
Search by file name
|
Ctrl +O
|
Cmd + O
|
|
Jump to line number
|
Ctrl s.P. line number
|
The number of the line of the cmd plus P plus
|
|
Jump to column
|
Ctrl , O , Numbers , Numbers, Numbers
|
Cmd , O , number , number
|
|
Enter the member
|
Ctrl + Shift + O
|
Cmd + Shift +O
|
|
Close the active label
|
Alt + W
|
Opt + W
|
|
Run the snippet
|
Ctrl + Enter
|
Cmd + Enter
|
The exception cannot be paused
Pause all exceptions (including those caught inside the try/catch block)
Pause an unaught exception (usually the one you want)
Code editor shortcuts
|
Windows
|
Linux
|
Mac
|
|
Match parentheses
|
Ctrl +M
|
|
|
Jump to a line
|
Ctrl s P s line number
|
The number of the line of the cmd plus P plus
|
|
Jump to a column
|
Ctrl, O, number, number
|
Cmd s O s number s number s number
|
|
Modify to comment
|
Ctrl + /
|
Cmd + /
|
|
Find the next place to appear
|
Ctrl + D
|
Cmd + D
|
|
Undo the last choice
|
Ctrl + U
|
Cmd + U
|
TimeLine panel
|
Windows
|
Linux
|
Mac
|
|
Start/stop the record
|
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 the record
|
Ctrl + E
|
Cmd + E
|
Console (console)
|
Windows
|
Linux
|
Mac
|
|
Accept the prompt command
|
Right keyboard
|
Right keyboard
|
|
The previous command line
|
on the keyboard
|
on the keyboard
|
|
The next command line
|
under the keyboard
|
under the keyboard
|
|
Focus on the console
|
Ctrl +
</kbd> | <kbd> Ctrl</kbd> +<kbd>
|
|
Clear the console
|
Ctrl + L
|
Cmd + K , Opt + L
|
|
Multi-line input
|
Shift + Enter
|
Ctrl +Return
|
|
Perform
|
Enter
|
Return
|
Right-click on the console:
-
XMLHttpRequest logging: Open to view XHR logs
-
Preserve log is on the navigation bar
-
Filter: Hide or display the message for the script file
-
Clear console: Clear the console
Screenshot
|
Windows
|
Linux
|
Mac
|
|
Zoom in and out
|
Alt + Scroll ,Ctrl +Click and drag with two fingers
|
Opt + Scroll ,Cmd + Click and drag with two fingers
|
|
A tool for checking elements
|
Ctrl + Shift + C
|
Cmd + Shift + C
|
Debugging
Console (console)
|
Windows
|
Linux
|
Mac
|
|
Zoom in and out
|
Shift + Scroll
|
Shift + Scroll
|
Chrome's other shortcuts
Here are some other Chrome shortcuts that are common to browsers and are not unique to DevTools.
See all shortcuts for Chrome for Windows, Mac,
and Linux.
|
Windows
|
Linux
|
Mac
|
|
Find the next one
|
Ctrl + G
|
Cmd + G
|
|
Look for the previous one
|
Ctrl + Shift + G
|
Cmd + Shift + G
|
|
Incognito mode opens a new window
|
Ctrl +Shift + N
|
Cmd + Shift + N
|
|
Switch the bookmark bar switch
|
Ctrl + Shift + B
|
Cmd +Shift + B
|
|
View the history page
|
Ctrl +H
|
Cmd + Y
|
|
View the download page
|
Ctrl + J
|
Cmd +Shift + J
|
|
View Task Manager
|
Shift + ESC
|
Shift + ESC
|
|
The next page of the History tab
|
Alt + Right
|
Opt + Right
|
|
The previous page of the History tab
|
Backspace , Alt + Left
|
Backspace , Opt + Left
|
|
Check the address bar content
|
F6 , Ctrl + L ,Alt + D
|
Cmd + L , Opt +D
|
|
Add a ?
to perform a keyword search with the default search engine
|
Ctrl + K , Ctrl + E
|
Cmd + K , Cmd + E
|