Google Chrome Developer Tools Keyboard Shortcuts

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…

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.

To access the DevTools, on any web page or app in Google Chrome you can use one of these options:

  • Open the Chrome menu 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
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
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

Element Pseudostates Emulate an element’s pseudo state (:active, :hover, :focus, :visited)

Adding style selectors Add new style selectors

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 Pause on All exceptions (including those caught within try/catch blocks)

Pause on Uncaught Exceptions Pause on uncaught exceptions (usually the one you want)

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
Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E
Save timeline data Ctrl + S Cmd + S
Load timeline data Ctrl + O Cmd + O
Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E
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
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
Windows / Linux Mac
Pinch zoom in and out Shift + Scroll Shift + Scroll

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

Remember to like our facebook and our twitter @geekchrome for a chance to win a free android tablet every month!

Quick Links: Google Chrome Keyboard Shortcuts For Mac | Google Chrome Keyboard Shortcuts For Windows | Top Free Linux Web Hosts To Try | Chromebook Keyboard Shortcuts

Today’s Popular Chrome Article: Google Chrome Keyboard Shortcuts For Linux

Juniya

Juniya

A web developer, programmer, ubuntu and chrome os supporter. I also love comic books and I enjoy researching history facts, kind of weird right? My role on Chromegeek.com is to make sure everything works 24/7.