Chrome DevTools Cheatsheet - Front-end Debugging Reference

Once you select a node in the Elements panel, $0 refers to that element and you can operate on it directly: $0.style.color = "red" or $0.remove(). $("selector") is querySelector and returns one match; $$("selector") is querySelectorAll and returns a NodeList you can then .forEach over. To get a complicated selected element out of the panel, use Store as global variable to keep it as a global, or console.dir(element) to print the DOM object's properties — console.log alone only gives you an "[object HTMLDivElement]" summary.

Pair console.time("label") with console.timeEnd("label") using the same label; repeating a start warns and a missing end prints nothing. Wrap each suspicious stage — console.time("parse") around parsing, console.time("render") around rendering — and compare the two numbers in the Console, then subdivide whichever is larger. Alongside it, console.count("label") counts invocations and exposes redundant calls inside a loop, console.group / console.groupEnd collapse noisy output, and console.assert(condition, "error") checks an invariant.

The filter box combines conditions: narrow by type — Doc, JS, CSS, Img, XHR — to drop static-asset noise; -domain:example.com excludes a domain; status-code:404 pins every 404; is:from-cache surfaces cache hits. Pair it with Disable cache and reload to check whether caching is masking the problem, Throttling: Slow 3G to reproduce weak-network behaviour, and Block request URL to deliberately break a request and verify your fallback. Once you have the request, right-click Copy as cURL and replay it in the terminal.

Cmd + Shift + M toggles device emulation; once a device is selected you can edit the HTML directly in Elements, and Force Element State pins :hover / :active so interactive styles become inspectable. Cmd+Shift+C puts you in the element picker for clicking straight on the real page. When the bug involves storage, move to the Application panel to inspect Local Storage, Session Storage, Cookies, IndexedDB and Cache Storage, and use Clear site data to wipe state before reproducing so leftovers do not confuse you; Service Workers and Manifest panels cover PWA issues.

Hit Record to capture (and avoid touching other tabs while recording, or you pollute the data), then use Screenshots to grab the frame where the jank is visible. Bottom-Up sorts by Self Time, telling you directly which functions burn the most CPU; Call Tree expands the stack so you can find who called the slow code. Summary shows how time is distributed across phases, and the Memory panel alongside it reveals whether the JS heap keeps growing during the capture. The workflow is: locate the longest slice in Summary, then identify the culprit in Bottom-Up.