Chrome DevTools Cheat Sheet
Built into Chrome and Edge. Shortcuts are for Windows / Linux; on macOS Ctrl → ⌘ and Shift → ⌥ where shown.
On this page
Open & Navigate #
| Shortcut | Action |
|---|---|
F12 or Ctrl + Shift + I | Open DevTools (mac: ⌘ ⌥ I) |
Ctrl + Shift + C | Inspect element picker (mac: ⌘ ⇧ C) |
Ctrl + Shift + J | Open the Console (mac: ⌘ ⌥ J) |
Ctrl + Shift + P | Command Menu (run any DevTools command) |
Ctrl + P | Open a source file |
Ctrl + Shift + M | Device toolbar (mobile / responsive view) |
Ctrl + [ / Ctrl + ] | Previous / next panel |
Esc | Toggle the drawer (Console under any panel) |
Ctrl + Shift + D | Switch dock position |
Ctrl + Shift + F | Search across all loaded sources |
Ctrl + Shift + R | Hard reload |
With DevTools open, right-click the reload button → Empty cache and hard reload.
Elements Panel #
| Action | How |
|---|---|
| Edit text / attribute | Double-click it |
| Edit as HTML | F2 |
| Hide element | H |
| Delete element | Delete |
| Undo | Ctrl + Z |
| Expand all children | Alt + click the arrow |
Force :hover, :focus… | Styles → :hov |
| Add a class | Styles → .cls |
| Change a number | Select it and press ↑/↓ (Shift = ×10, Alt = ×0.1) |
| Color picker / eyedropper | Click the color square |
| Flex / grid overlay | Click the flex / grid badge |
| Copy selector / JS path | Right-click element → Copy |
| Break on DOM change | Right-click → Break on → subtree modifications |
Console Helpers #
| Command | Action |
|---|---|
$0 | The currently selected element |
$('sel') / $$('sel') | querySelector / querySelectorAll (as an array) |
$_ | Result of the last expression |
copy(obj) | Copy to the clipboard (great for JSON) |
console.table(array) | Show as a table |
getEventListeners($0) | Event listeners on an element |
monitorEvents(window, "resize") | Log events |
inspect(el) | Jump to it in Elements |
clear() or Ctrl + L | Clear the console |
| 👁 Create live expression | Watch a value continuously |
Sources / Debugging #
| Shortcut / feature | Action |
|---|---|
| Click a line number | Breakpoint |
| Right-click the line number | Conditional breakpoint / logpoint (log without editing code) |
debugger; in your code | Pause here |
F8 | Pause / resume |
F10 / F11 / Shift + F11 | Step over / into / out |
Ctrl + B | Toggle breakpoint on the current line |
{} button | Pretty-print minified code |
| Overrides | Edit files and keep the changes across reloads |
Network Panel #
| Feature | Use |
|---|---|
Filter: Fetch/XHR, JS, Img… | Show only API calls, scripts… |
Filter: status-code:404, -domain:google.com | Advanced filters |
| Disable cache | Always fetch fresh files (while DevTools is open) |
| Preserve log | Keep requests across page loads |
| Throttling: Slow 4G, Offline | Test slow / no connection |
| Right-click → Copy as cURL / fetch | Reproduce a request elsewhere (Postman, terminal) |
| Right-click → Block request URL | Test what breaks without a file |
Ctrl + E | Start / stop recording |
Application Panel #
| Section | Use |
|---|---|
| Local / Session Storage | View, edit and delete keys |
| Cookies | Edit or delete cookies |
| IndexedDB | Browse client databases |
| Service Workers | Update / unregister (PWA debugging) |
| Storage → Clear site data | Full reset for the site |
Useful Command Menu Commands (Ctrl + Shift + P) #
| Type | Does |
|---|---|
screenshot | Capture a full-size or node screenshot |
disable javascript | Test without JS |
rendering | Paint flashing, emulate prefers-color-scheme: dark, vision deficiencies |
coverage | Unused CSS / JS |
lighthouse | Performance, accessibility and SEO audit |
sensors | Fake geolocation and orientation |
Nothing on this sheet matches “”.