Home » Google Chrome Tutorials » Google Chrome Developer Tools Keyboard Shortcuts

Google Chrome Developer Tools Keyboard Shortcuts

by Juniya Post Updated: March 21, 2024

: Keyboard shortcuts for developers

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…

Contents

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

	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)

Adding style selectors 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

Pause on Exception Button 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	Ctrl + K, Ctrl + E	Cmd + K, Cmd+ E

For more information check out: Google Support

Other shortcuts: Google Chrome Keyboard Shortcuts for Mac, Google Chrome Keyboard Shortcuts for Windows, Chromebook Keyboard Shortcuts, & Google Chrome Keyboard Shortcuts for Linux

Post Views: 14,926

Google Chrome Developer Tools Keyboard Shortcuts