Using Chrome DevTools Console Shortcuts: $, $$, $_, and $i
This article introduces Chrome DevTools console shortcuts—including $0‑$4 for element references, $ and $$ for query selectors, $_ for the last expression result, and $i for importing npm libraries—explaining their usage to streamline front‑end debugging and testing.
This article is the first in a 24‑day series sharing concise DevTools tips, focusing on console shortcuts that make front‑end debugging more efficient.
The variables $0, $1, $2, $3 and $4 reference the currently selected HTML node and the previous selections in the Elements panel, allowing quick manipulation such as $1.appendChild($0).
The single‑character $ is a shorthand for document.querySelector, while $$ is a shortcut for document.querySelectorAll that returns an array; for example Array.from(document.querySelectorAll('div')) === $$("div").
The $_ variable stores the result of the last evaluated expression, enabling you to reuse that value without re‑typing the expression.
With the Chrome Console Importer extension, the $i command lets you import and run npm packages directly in the console, e.g., $i('lodash') or $i('moment'), fetching the library within seconds.
The article concludes by noting that these shortcuts provide a compact, powerful way to interact with the page during development.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
UC Tech Team
We provide high-quality technical articles on client, server, algorithms, testing, data, front-end, and more, including both original and translated content.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.