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