Chrome DevTools Tips and Tricks

This page provides a cheat sheet of tips and tricks for Chrome Developer Tools (DevTools), including debugging operations, network monitoring, performance analysis, and more.

Elements Panel

Action	Shortcut
Open DevTools	`F12` or `Ctrl` + `Shift` + `I`
Toggle Device Toolbar	`Ctrl` + `Shift` + `M`
Refresh and Clear Cache	`Ctrl` + `Shift` + `R`
View element’s context menu	`Right Click`
Edit element	`Enter`
Delete element	`Delete`
Copy element	`Ctrl` + `C`
Paste element	`Ctrl` + `V`
View element’s CSS rules	`Ctrl` + `Shift` + `C`

Console Panel

Action	Shortcut
Open Console	`Esc`
Clear Console	`Ctrl` + `L`
Copy selected text	`Ctrl` + `C`
Paste text	`Ctrl` + `V`
View command history	`Up Arrow` and `Down Arrow`
View object’s detailed information	`Ctrl` + `Shift` + `C`

Network Panel

Action	Shortcut
Start/Stop recording network activity	`Ctrl` + `E`
Clear network log	`Ctrl` + `R`
Filter requests	`Ctrl` + `F`
View request’s detailed information	`Ctrl` + `Shift` + `C`

Performance Panel

Action	Shortcut
Start/Stop recording performance	`Ctrl` + `E`
Export recorded performance	`Ctrl` + `S`
Filter events	`Ctrl` + `F`

Memory Panel

Action	Shortcut
Take snapshot	`Ctrl` + `S`
Export snapshot	`Ctrl` + `Shift` + `S`
Filter snapshots	`Ctrl` + `F`

Application Panel

Action	Shortcut
Refresh application	`Ctrl` + `R`
Clear storage	`Ctrl` + `Shift` + `R`
Filter data	`Ctrl` + `F`

Security Panel

Action	Shortcut
View certificate	`Ctrl` + `Shift` + `C`
Reload page and bypass cache	`Ctrl` + `Shift` + `R`

Misc

Action	Shortcut
Open Settings	`F1`
Toggle Theme	`Ctrl` + `Shift` + `P` then type `theme`
View Shortcuts	`Ctrl` + `Shift` + `P` then type `shortcuts`