Skip to content

Latest commit

 

History

History
155 lines (119 loc) · 8.21 KB

chrome-devtools-cheatsheet.md

File metadata and controls

155 lines (119 loc) · 8.21 KB
Raw
title description created
Chrome DevTools CheatSheet
The most commonly used keyboard shortcuts are given here.
2022-10-20

Table of Contents

Chrome DevTools Keyboard Shortcuts for Developers

Keyboard shortcuts for opening DevTools

Windows / Linux Mac Description
Ctrl + Shift+ J Cmd(⌘) + Option(⌥) + J Open the Console panel
Ctrl + Shift + C Cmd(⌘) + Shift + C or
Cmd(⌘) + Option(⌥) + C		 Open the Elements panel
F12 or
Ctrl + Shift + I		 Cmd(⌘) + Option(⌥) + I Open whatever panel you used last

🔼Back to Top

Global keyboard shortcuts

Windows / Linux Mac Description
Ctrl + ] Cmd(⌘) + ] Focus the next panel
Ctrl + [ Cmd(⌘) + [ Focus the previous panel
Ctrl + Shift + M Cmd(⌘) + Shift + M Toggle Device Mode
F5 or
Ctrl + R		 Cmd(⌘) + R Normal Reload
Ctrl + F5 or
Ctrl + Shift + R		 Cmd(⌘) + Shift + R Hard Reload
Ctrl + Shift + + Cmd(⌘) + Shift + + Zoom in
Ctrl + - Cmd(⌘) + - Zoom out
Ctrl + 0 Cmd(⌘) + 0 Restore default zoom level
Ctrl +Shift + P Cmd(⌘) + Shift + P Open the Command Menu
Ctrl + F Cmd(⌘) + F Search for text within the current panel. Supported only in the Elements, Console, Sources, Performance, Memory, JavaScript Profiler, and Quick Source panels.

🔼Back to Top

Elements panel keyboard shortcuts

Windows / Linux Mac Description
Ctrl + Z Cmd(⌘) + Z Undo change
Ctrl + Y Cmd(⌘) + Shift + Z Redo change
Right Arrow(→) Right Arrow(→) Expand the currently-selected node.
If the node is already expanded, this shortcut selects the element below it
Left arrow(←) Left arrow(←) Collapse the currently-selected node.
If the node is already collapsed, this shortcut selects the element above it
Enter(↵) Enter(↵) Toggle Edit Attributes mode on the currently-selected element
H H Hide the currently-selected element
Function + F2 F2 Toggle Edit as HTML mode on the currently-selected element

🔼Back to Top

Styles pane keyboard shortcuts

Windows / Linux Mac Description
Hold Ctrl then click the property value Hold Cmd(⌘) then click the property value Go to the line where a property value is declared
Hold Chift then click the
Color Preview box next to the value		 Hold Shift then click the
Color Preview box next to the value		 Cycle through the RBGA, HSLA, and Hex representations of a color value
Click a property name or value then press Tab(↹) or Shift + Tab(↹) Click a property name or value then press Tab(↹)or Shift + Tab(↹) Select the next / previous property or value
Click a value then press the Up Arrow(↑) or Down Arrow(↓) Click a value then press the Up Arrow(↑) or Down Arrow(↓) Increment / decrement a property value by 1
Click a value then press the Shift + Up Arrow(↑) or Shift + Down Arrow(↓) Click a value then press the Shift + Up Arrow(↑) or Shift+ Down Arrow(↓) Increment / decrement a property value by 10
Click a value then press the Ctrl + Up Arrow(↑) or Ctrl + Down Arrow(↓) Click a value then press the Cmd(⌘) + Up Arrow(↑) or Cmd(⌘) + Down Arrow(↓) Increment / decrement a property value by 100

🔼Back to Top

Sources panel keyboard shortcuts

Windows / Linux Mac Description
F8 or
Ctrl + \		 F8 or
Cmd(⌘) + \		 Pause script execution (if currently running) or
resume (if currently paused)
F10 or
Ctrl + '		 F10 or
Cmd(⌘) + '		 Step over next function call
F11 or
Ctrl + ;		 F11 or
Cmd(⌘) + ;		 Step into next function call
Shift + F11 or
Ctrl + Shift + ;		 Shift + F11 or
Cmd(⌘) + Shift + ;		 Step out of current function
Ctrl + S Cmd(⌘) + S Save changes to local modifications
Ctrl + Alt + S Cmd(⌘) + Option(⌥) + S Save all changes
Ctrl + G Ctrl + G Go to line
Alt + W Option(⌥) + W Close the active tab
Ctrl + Shift + Y Cmd(⌘) + Shift + Y Toggle the Navigation sidebar on the left
Ctrl + Shift + H Cmd(⌘)+ Shift + H Toggle the Debugger sidebar on the right

🔼Back to Top

Code Editor keyboard shortcuts

Windows / Linux Mac Description
Ctrl + Delete(del) Option(⌥) + Delete(del) Delete all characters in the last word, up to the cursor
Ctrl + M Ctrl + M Go to matching bracket
Ctrl + B Cmd + B Add or remove a line-of-code breakpoint
Ctrl + D or
Ctrl + U		 Cmd + D or
Cmd + U		 Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously
Ctrl + / Cmd(⌘) + / Toggle single-line comment.
If multiple lines are selected, DevTools adds a comment to the start of each line

🔼Back to Top

Network panel keyboard shortcuts

Windows / Linux Mac Description
Ctrl + E Cmd(⌘) + E Start/stop recording
Ctrl + R Cmd(⌘) + R Record a reload
R R Replay a selected XHR request
Escape(esc) Escape(esc) Hide the details of a selected request

🔼Back to Top

Performance panel keyboard shortcuts

Windows / Linux Mac Description
Ctrl + E Cmd(⌘) + E Start/stop recording
Ctrl + S Cmd(⌘) + S Save recording
Ctrl + O Cmd(⌘) + O Load recording

🔼Back to Top

Memory panel keyboard shortcuts

Windows / Linux Mac Description
Ctrl + E Cmd(⌘)+ E Start/stop recording

🔼Back to Top

Console panel keyboard shortcuts

Windows / Linux Mac Description
Right Arrow(→) or
Tab(↹)		 Right Arrow(→) or
Tab(↹)		 Accept autocomplete suggestion
Escape(esc) Escape(esc) Reject autocomplete suggestion
Up Arrow(↑) Up Arrow(↑) Get previous statement
Down Arrow(↓) Down Arrow(↓) Get next statement
Ctrl + ` Ctrl + ` Focus the Console
Ctrl + L Cmd(⌘) + K or
Option(⌥) + L		 Clear the Console

🔼Back to Top

Search tab keyboard shortcuts

Windows / Linux Mac Description
Ctrl + Shift + { or
Ctrl + Shift + }		 Cmd(⌘) + Option(⌥) + { or
Cmd(⌘) + Option(⌥) + }		 Expand/collapse all search results

🔼Back to Top