DevTools tips — day 1: the console dollars
An advent calendar for front-end developers
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:
