Chrome DevTools: 20 Hidden Features

Chrome DevTools can do much more than inspect element. 20 features most people don’t know about.

Console Tricks¶

• $0 — selected element
• $_ — last result
• copy(obj) — copies to clipboard
• console.table(data)
• monitor(fn) — logs function calls

Network¶

• Copy as fetch/curl
• Throttling (Slow 3G)
• Block requests
• Preserve log

Elements & CSS¶

• Force state (:hover, :focus)
• CSS Overview
• Computed tab

Performance & Memory¶

• Coverage — unused CSS/JS
• Lighthouse
• Memory snapshot
• Performance recording
• Paint flashing

Command Menu¶

Ctrl+Shift+P in DevTools — like VS Code Command Palette.

Tip¶

Follow What’s New in DevTools on developer.chrome.com.