Chrome DevTools Cheatsheet - Front-end Debugging Reference

Console.log poking is a poor substitute for stepping through a live page. This reference covers Elements and DOM breakpoints, console tricks, Network waterfall and request replay, Performance flame charts, and Application storage. Use it when a page works on your laptop but misbehaves in production — isolate a layout bug, find a slow request, or trace a storage leak. After reading you inspect, measure and fix frontend problems from inside the browser instead of guessing.

Dev Tools·54 commands·Last updated 2026-07-21

Shortcuts 8

F12 or Cmd+Option+I

Open DevTools (macOS)

F12 or Ctrl+Shift+I

Open DevTools (Win/Linux)

Cmd+Option+J

Open Console (macOS)

Cmd+Option+E

Open Elements (macOS)

Cmd+Shift+C

Select-element mode

Cmd+Shift+P

Open the command menu

Cmd+P

Quick open file

Cmd+Shift+M

Toggle device emulation

Console Commands 12

console.log("message")

Log a message

console.table(array)

Print as a table

console.time("label") / console.timeEnd("label")

Timing

console.count("label")

Count

console.group("group") / console.groupEnd()

Group

console.assert(condition, "error")

Assert

console.dir(element)

Print a DOM object

copy(document.title)

Copy to clipboard

$0

Currently selected DOM element

$("selector")

Query selector (like querySelector)

$$("selector")

Query all matching elements

monitorEvents(element, "click")

Monitor events

Elements Debugging 9

Edit as HTML

Edit element HTML

Toggle Edit as HTML

Toggle edit-as-HTML mode

Force Element State (:hover, :active)

Force element state (:hover, :active)

Break on: subtree modifications

Break on: subtree modifications

Break on: attribute modifications

Break on: attribute modifications

Store as global variable

Store as global variable

Copy selector

Copy CSS selector

Copy XPath

Copy XPath

Delete node

Delete node

Network Analysis 10

Disable cache

Disable cache

Throttling: Slow 3G

Network throttling

Filter: Doc, JS, CSS, Img, XHR

Filter by type

Filter: -domain:example.com

Exclude a domain

Filter: status-code:404

Filter by status code

Filter: is:from-cache

Cache requests

Replay XHR

Replay XHR

Copy as cURL

Copy as cURL

Save as...

Save as...

Block request URL

Block request URL

Performance 7

Record

Record performance data

Screenshots

Screenshots

Memory

Memory analysis

Main thread

Main thread analysis

Flame Chart

Flame Chart

Bottom-Up / Call Tree

Bottom-Up / Call Tree

Summary

Summary

Application Storage 8

Local Storage

Local Storage

Session Storage

Session Storage

Cookies

Cookie management

IndexedDB

IndexedDB viewer

Cache Storage

Service Worker cache

Clear site data

Clear site data

Service Workers

Service Worker management

Manifest

PWA Manifest

Tips

$0 in Console is the currently selected DOM element, directly operable.
Right-click in the Network panel and Copy as cURL to replay a request in the terminal.
When recording in the Performance panel, avoid other tabs open, which hurts accuracy.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Chrome DevTools Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.