Chrome DevTools keyboard shortcuts

Chrome DevTools  

Zeynel -
6 years ago
- Shortcuts
1
F12

Open whatever panel you used last

1
or Ctrl + ↑  Shift + I
0
Ctrl + ↑  Shift + J

Open the Console panel

Advertisement

These shortcuts are available in most DevTools panels.
0
F1

Show settings

0
or ?
0
Ctrl + ]

Focus the next panel

0
Ctrl + [

Focus the previous panel

0
Ctrl + ↑  Shift + D

Switch back to whatever docking position you last used

0
Ctrl + ↑  Shift + M

Toggle Device Mode

0
Ctrl + ↑  Shift + C

Toggle Inspect Element mode

0
Ctrl + ↑  Shift + P

Open the Command Menu

0
Esc

Toggle the drawer

0
F5

Normal reload

0
or Ctrl + R
0
Ctrl + F5

Hard reload

0
or Ctrl + ↑  Shift + R
0
Ctrl + F

Search for text within the current panel

0
Ctrl + ↑  Shift + F

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

0
Ctrl + O

Open a file in the Sources panel

0
or Ctrl + P
0
Ctrl + ↑  Shift + +

Zoom in

0
Ctrl + ↑  Shift + -

Zoom out

0
Ctrl + 0

Restore default zoom level

0
Ctrl + O

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

0
Ctrl + Z

Undo change

1
Ctrl + Y

Redo change

0
  

Select the element above / below the currently-selected element

0

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

0

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

0
Ctrl +

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

0
⤶ Enter

Toggle Edit Attributes mode on currently-selected element

0
Tab

Select the next / previous attribute after entering Edit Attributes mode

0
or ↑  Shift + Tab
0
H

Hide the currently selected element

0
F2

Toggle Edit as HTML mode on the currently-selected element

0
Ctrl +

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

0
↑  Shift +

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

0
Tab

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

0
or ↑  Shift + Tab
0
Alt +   

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

0
  

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

0
↑  Shift +   

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

0
↑  Shift +   

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

0
F8

Pause script execution or resume

0
or Ctrl + \
0
F10

Step over next function or call

0
or Ctrl + '
0
F11

Step into next function call

0
or Ctrl + ;
0
↑  Shift + F11

Step out of current function

0
or Ctrl + ↑  Shift + ;
0
Ctrl + .

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

0
or Ctrl + ,
0
Ctrl + S

Save changes to local modifications

Advertisement

0
Ctrl + Alt + S

Save all changes

0
Ctrl + G

Go to line

0
Ctrl + O

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

0
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

0
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)

0
Alt + W

Close the active tab

0
Ctrl + Del

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

0
Ctrl + B

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

0
Ctrl + M

Go to matching bracket

0
Ctrl + /

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

0
Ctrl + D

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

0
or Ctrl + U
0
Ctrl + E

Start / stop recording

0
Ctrl + S

Save recording

0
Ctrl + O

O Load recording

0
Ctrl + E

Start / stop recording

0

Accept autocomplete suggestion

0
or Tab
0
Esc

Reject autocomplete suggestion

0

Get previous statement

0

Get next statement

0
Ctrl + `

Focus the console

0
Ctrl + L

Clear the console

0
↑  Shift + ⤶ Enter

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

0
⤶ 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:
Is this page helpful?
0 0

Program information

Program name: Chrome DevTools 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: developers.google.com

Last update: 11/11/2019 8:10 PM UTC

How easy to press shortcuts: 81%

More information >>

Shortcut count: 79

Platform detected: Windows or Linux


User operations

Add Chrome DevTools to favorites

Add to favorites

Advertisement


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


 
No comments yet. Ask, or type the first one!