Chrome DevTools

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.

Contents

  1. Opening DevTools
  2. All Panels
  3. Elements Panel
  4. Styles Sidebar
  5. Sources Panel
  6. Timeline Panel
  7. Console
  8. Other Chrome Shortcuts

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 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 + J Cmd + Opt + J

To open up the General Settings dialog type ? or F1 when the Developer Tools window is open. Press Esc to close the settings dialog.

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 + Alt + [
Forward in panel history Ctrl + Alt + ] Cmd + Alt + ]
Jump to panel 1-9 (when enabled in General Settings) Ctrl + 1-9 Cmd + 1-9
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 + Alt + F
Search by filename (except on Timeline) Ctrl + O, Ctrl + O Cmd + O, Cmd + O
Restore default text size Ctrl + 0 Shift + 0
Zoom in Ctrl + + Shift + +
Zoom out Ctrl + - Shift + -

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 tag Single-click on tag
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 psuedo states: (:active, :hover, :focus, :visited)
  • Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal)
  • Clear console

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
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
View auto-complete suggestions Ctrl + Space Cmd + Space
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

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
Delete individual words Alt + Delete Opt + Delete
Save changes to local modifications Ctrl + S Cmd + 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>
Go to member Ctrl + Shift + O Cmd + Shift + O
Toggle console and evaluate code selected in Sources panel Ctrl + Shift + E Cmd + Shift + E
Run snippet Ctrl + Enter Cmd + Enter
Toggle comment Ctrl + / Cmd + /

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)

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

Profiles Panel

Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E

Console

Windows / Linux Mac
Next suggestion Tab Tab
Previous suggestion Shift + Tab Shift + Tab
Accept suggestion Right Right
Previous command / line Up Up
Next command / line Down Down
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

Screencasting

Windows / Linux Mac
Pinch zoom in and out Alt + Scroll,Ctrl + Cick and drag with two fingers Opt + Scroll, Cmd + Cick and drag with two fingers
Inspect element tool Ctrl + Shift + C Cmd + Shift + C

Emulation

Windows / Linux Mac
Pinch zoom in and out Shift + Scroll Shift + Scroll

Other Chrome Shortcuts

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 Alt + Right
Previous page in a tabs browsing history Backspace, Alt + Left Backspace, Alt + Left
Highlight content in the web address area F6, Ctrl + L, Alt + D Cmd + L, Alt + 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

Back to top

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.