I learned something new today when developing in the Firefox Dev Tools console (although this applies to Chrome too) – something which was really useful and which I thought I’d share.

Basically, type $$('selector') into the console (replacing selector as desired) and it’ll give you back all matching items on the page.

So for example, $$('script') or `$$('li').

Similarly you can select a single element by instead using just one dollar ($).

These basically seem to be console shortcuts for document.querySelector() (in the case of $) and document.querySelectorAll() (in the case of $$).

The other really cool thing is that the resultant nodeList is returned as an array, so you could do e.g. $$('li').forEach(…) or similar.

I owe this new discovery to the very talented Remy Sharp (@rem) who dropped this science routinely during a live-stream where he refactored his blog from jQuery to vanilla JavaScript.

Cheers, Remy!