Chrome DevTools Usage Tips

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

Elements Panel

Operation	Shortcut
Open DevTools	`F12` or `Ctrl` + `Shift` + `I`
Toggle Device Toolbar	`Ctrl` + `Shift` + `M`
Refresh and Clear Cache	`Ctrl` + `Shift` + `R`
View Element Context Menu	`Right Click`
Edit Element	`Enter`
Delete Element	`Delete`
Copy Element	`Ctrl` + `C`
Paste Element	`Ctrl` + `V`
View Element CSS Rules	`Ctrl` + `Shift` + `C`

Console Panel

Operation	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 Details	`Ctrl` + `Shift` + `C`

Network Panel

Operation	Shortcut
Start/Stop Recording Network Activity	`Ctrl` + `E`
Clear Network Log	`Ctrl` + `R`
Filter Requests	`Ctrl` + `F`
View Request Details	`Ctrl` + `Shift` + `C`

Performance Panel

Operation	Shortcut
Start/Stop Recording Performance	`Ctrl` + `E`
Export Recorded Performance	`Ctrl` + `S`
Filter Events	`Ctrl` + `F`

Memory Panel

Operation	Shortcut
Take Snapshot	`Ctrl` + `S`
Export Snapshot	`Ctrl` + `Shift` + `S`
Filter Snapshots	`Ctrl` + `F`

Application Panel

Operation	Shortcut
Refresh Application	`Ctrl` + `R`
Clear Storage	`Ctrl` + `Shift` + `R`
Filter Data	`Ctrl` + `F`

Security Panel

Operation	Shortcut
View Certificate	`Ctrl` + `Shift` + `C`
Reload Page and Bypass Cache	`Ctrl` + `Shift` + `R`

Misc

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