DEV Community

loading...
Cover image for Day 1: DevTools Tip of the day: The Console dollars

Day 1: DevTools Tip of the day: The Console dollars

Ishtiaq Syed
Updated on ・1 min read

$0

$0 is a reference to the currently selected html node in the Elements pane.
Also, $1 is the one selected previously, $2 the one before that, etc. up to the number $4.
You can use that additional references to try out some relative operations
(e.g. $1.appendChild($0))

Alt Text


$ and $$

$ in the console is an alias for the lengthy document.querySelector method.
That’s if you don’t already have $ variable defined in your app (e.g. jQuery)
$$ is an even bigger timesaver, because it not only runs document.QuerySelectorAll but also returns an array of nodes instead of NodeList type.
Basically: Array.from(document.querySelectorAll('div')) === $$('div')
Much shorter!

Picture showing how $ and $$ variable is used


$_

The $_ variable references the result of the last evaluated expression.

Picture showing how $_ variable is used


$i

With the Console Importer browser extension for Chrome you can quickly import and play with npm libraries right in the console.
Just run e.g. $i('lodash') or $i('moment') and after a couple of seconds you have lodash / momentjs available.

Picture showing how $i variable is used


Discussion (0)