DevTools tips — day 1: the console dollars

An advent calendar for front-end developers

Tomek Sułkowski
Dec 1, 2018 · 2 min read

Over the 24 days leading to the holidays I will be publishing short articles with tips on how to use DevTools in more performant and fun way. Let’s get to it then!

1. $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))

2. $ 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!

3. $_

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

4. $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.


And that’s it for today. Short and sweet.

As usual: if you’ve learned something new, please:

→ clap 👏 button below️ so more people can see this
follow me on Twitter (@sulco) so you won’t miss future posts:

Also, the 2nd day is already published, read it here:

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man, https://twitter.com/sulco

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade