Day 1: DevTools Tip of the day - The Console dollars
$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)
)
$
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!
$_
The $_
variable references the result of the last evaluated expression.
$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.