Chrome DevTools keyboard shortcuts

Chrome DevTools
F12

Open whatever panel you used last

or Ctrl + ↑   Shift + I
Ctrl + ↑   Shift + J

Open the Console panel

These shortcuts are available in most DevTools panels.
F1

Show settings

or ?
Ctrl + ]

Focus the next panel

Ctrl + [

Focus the previous panel

Ctrl + ↑   Shift + D

Switch back to whatever docking position you last used

Ctrl + ↑   Shift + M

Toggle Device Mode

Ctrl + ↑   Shift + C

Toggle Inspect Element mode

Ctrl + ↑   Shift + P

Open the Command Menu

Esc

Toggle the drawer

F5

Normal reload

or Ctrl + R
Ctrl + F5

Hard reload

or Ctrl + ↑   Shift + R
Ctrl + F

Search for text within the current panel

Ctrl + ↑   Shift + F

Open Search tab in the Drawer, which lets you search for text across all loaded resources

Ctrl + O

Open a file in the Sources panel

or Ctrl + P
Ctrl + ↑   Shift + +

Zoom in

Ctrl + ↑   Shift + -

Zoom out

Ctrl + 0

Restore default zoom level

Ctrl + O

then type ! followed by the name of the script, then press Enter: Run snippet

Ctrl + Z

Undo change

Ctrl + Y

Redo change

↑  ↓

Select the element above / below the currently-selected element

Expand the currently-selected node. If the node is already expanded, this shortcut selects the element below it

Collapse the currently-selected node. If the node is already expanded, this shortcut selects the element above it

Ctrl + Mouse left click

(on the arrow icon next to the elements name) Expand or collapse the currently-selected node and all of its children

⤶ Enter

Toggle Edit Attributes mode on currently-selected element

⭾ Tab

Select the next / previous attribute after entering Edit Attributes mode

or ↑   Shift + ⭾ Tab
H

Hide the currently selected element

F2

Toggle Edit as HTML mode on the currently-selected element

Ctrl + Mouse left click

(on the property value) Go to the line where a property value is declared

↑   Shift + Mouse left click

(on the Color Preview box) Cycle through the RBGA, HSLA, and Hex representations of a color value

⭾ Tab

Use this shortcut after clicking property name or value to select the next / previous property or value

or ↑   Shift + ⭾ Tab
Alt + ↑  ↓

Use this shorcut after clicking a value to increment / decrement a property value by 0.1

↑  ↓

Use this shorcut after clicking a value to increment / decrement a property value by 1

↑   Shift + ↑  ↓

Use this shorcut after clicking a value to increment / decrement a property value by 10

↑   Shift + ↑  ↓

Use this shorcut after clicking a value to increment / decrement a property value by 100

Advertisement
F8

Pause script execution or resume

or Ctrl + \
F10

Step over next function or call

or Ctrl + '
F11

Step into next function call

or Ctrl + ;
↑   Shift + F11

Step out of current function

or Ctrl + ↑   Shift + ;
Ctrl + .

Select the call frame below / above the currently-selected frame

or Ctrl + ,
Ctrl + S

Save changes to local modifications

Ctrl + Alt + S

Save all changes

Ctrl + G

Go to line

Ctrl + O

then type : followed by the line number then press Enter: Jump to a line number of the currently-open file

Ctrl + O

then type : followed by the line number then another: then column number then press Enter: Jump to a column of the currently-open file

Cttl + ↑   Shift + O

then type in the name of the declaration / rule set, or select it from the list of options: Go to a function declaration (if currently-open file is HTML or a script), or a rule set (if currently-open file is a stylesheet)

Alt + W

Close the active tab

Ctrl + Del

Delete all characters in the last word, up to the cursor

Ctrl + B

(when cursor is focused on the line) Add or remove a line-of-code breakpoint

Ctrl + M

Go to matching bracket

Ctrl + /

Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line

Ctrl + D

Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously

or Ctrl + U
Advertisement
Ctrl + E

Start / stop recording

Ctrl + S

Save recording

Ctrl + O

O Load recording

Ctrl + E

Start / stop recording

Accept autocomplete suggestion

or ⭾ Tab
Esc

Reject autocomplete suggestion

Get previous statement

Get next statement

Ctrl + `

Focus the console

Ctrl + L

Clear the console

↑   Shift + ⤶ Enter

Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary

⤶ Enter

Execute

Hold Alt then click Expand to expand all sub-properties of an object that's been logged to the console.

Share this page on:

Program information

Program name: Chrome DevTools (Developer tools)

Chrome DevTools are web debugging tools integrated to Google Chrome web browser. Those tools are used by web developers to access and ispect inner workings of a website, find issues, get ideas to optimize code etc.

Web page: https://developers.google.com


Similar programs



Advertisement

Advertisement

  Subscribe to our mailing list!

Useful technology tips and keyboard shortcuts will appear in your inbox.

Your email is kept private and we don't spam.

What is your favorite Chrome DevTools hotkey? Do you have any useful tips for program? Let other users know below.