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
Ctrl + E

Start / stop recording

Ctrl + S

Save recording

Ctrl + O

O Load recording

Ctrl + E

Start / stop recording

Advertisement

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


  1. Fortnite (PC)Fortnite (PC)
    10583    1
  2. SketchUpSketchUp
    9570   
  3. PlayerUnknown's BattlegPlayerUnknown's Battleg
    5847    2
  4. Total CommanderTotal Commander
    5764   
  5. Notepad++Notepad++
    5349   
  6. AMD Radeon ReLiveAMD Radeon ReLive
    5038    2
More keyboard shortcuts...

Advertisement

Advertisement


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