$ vs $$ in Chrome Dev Tools

JQuery-like Selectors for Faster DOM Node Selection

The popular JQuery library offers a more productive way to select DOM elements based on CSS selectors compared to the traditional web API. What if you need to access some DOM node properties or search some DOM nodes on the console? This becomes an easy task if your web app uses JQuery — you can use the $ syntax since JQuery is already loaded, but what if you don’t use JQuery?

Chrome lets you use $ syntax on the console even if you don’t use the JQuery library. On the Chrome console, $ works as a shortcut for the document.querySelector method by letting you instantly query for one element:

$('.item-01')

The above code snippet prints the first DOM node that has the item-01 class name. Similarly, the $$ shortcut triggers the document.querySelectorAll method and returns more than one element. For example, the following code snippet prints all <h1> elements:

$$('h1')

You can also select DOM elements based on XPath expressions as follows:

$x('/html/body/div')