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))

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