The browser console’s hidden helpers

The DevTools console comes with a handful of built-in helpers. The one I’ve found most useful is $0, which 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().

A few other shortcuts 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.