Using Chrome DevTools Console Shortcuts: $, $$, $_, and $i

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.