The browser console’s hidden helpers

I’d seen the == $0 hint in my browser console countless times. Somehow, I never stopped to wonder what it meant. When you hover over the == $0, a tooltip appears that says, “Use $0 in the console to refer to this element.”

It turns out $0 is one of the most useful DevTools shortcuts: it references the currently inspected element. In Chromium-based browsers, the four previously inspected elements are also available as $1–$4, making it easy to jump among them without repeatedly calling document.querySelector().

The DevTools console has a few other shortcuts that are surprisingly handy, too:

• $_ — the result of the previous expression
• $(selector) — shortcut for document.querySelector(selector)
• $$(selector) — shortcut for document.querySelectorAll(selector)
• $x(path) — evaluates an XPath expression and returns matching elements

The selector helpers accept an optional second argument—a startNode to search within instead of the entire document. Since they return DOM nodes, they compose nicely: $$("li", $("ul")) returns all list items within the first unordered list, and $("button", $0) finds a button within the currently inspected element.