How to debug better using $ sign shortcuts in Chrome devtools

Chrome devtools has a collection of utilities that can be used to perform common debugging tasks and make our life easier. The $ sign shortcuts are one such set of utilities. Let us see how to debug better using these $ sign shortcuts in Chrome devtools.

$_

Typing in $_ in Chrome devtools gives the value of the most recently evaluated expression. This can be quite useful when trying to test some values in the console. Let us say we were creating an object and then wanted to do something with it.

- Advertisement -
{ "first": "foo", "middle": "bar", "last": "baz" }
// after we hit return the same object gets printed in console
// and thus $_ references that object now
Object.keys($_)
// would print:  ['first', 'middle', 'last']

$0 – $4

Chrome devtools stores historical references to the last five DOM elements that were inspected (clicked upon) in the elements tab.$0 references the most recently clicked element, $1 references the one clicked before that, and so on.

Here is what this looks like:

$(selector [, startNode]) aka alias for the query selector function

We do not need to type the whole document.querySelector command in the console. Chrome devtools provide a jQuery esque shorthand for it.

$(selector) returns a reference to the first element that matches the specified CSS selector.

To return the first h1 in the HTML, we can simply type in:

$('h1')

This is equivalent to:

document.querySelector('h1');

Also, if you did not know this already, you can right click on the element and choose “Reveal in Elements Panel” to show the element in the DOM. Or hit the “Scroll in to View” to show it on the page.

The selector function also takes in a second optional argument which can be used to specify the element to search in.

For example:

$('h1',$('.head'))

returns the first h1 inside the element with the class head.

$$(selector [, startNode]) aka querySelectorAll

$$(selector) can be used to get an array of all elements that match the given CSS selector. This is equivalent to calling document.querySelectorAll. This one is not an alias, but a wrapper above querySelectorAll since it returns an array, and not a NodeList.

If we wanted to log the src attribute of all images in the DOM, we could use:

const images = $$('img');
for (const image of images) {
  console.log(image.src);
}

This function also takes a second argument which can be used to specify which elements/nodes to search from.

If we only wanted to search for images within the main element, we would use:

const images = $$('img',$('main'));

And those are all the tips that we had to share with you. There is a lot more that can be done with the Chrome devtools. We will keep adding more posts around it in the future. And if you have not already, check out the “Using logpoints for logging messages directly” post to learn more about another nifty feature of Chrome devtools!

Recent Articles

How to debug better using $ sign shortcuts in Chrome devtools

Chrome devtools has a collection of utilities that can be used to perform common debugging tasks and make our life easier. The...

Deep copying in JavaScript using structuredClone

For as long as anyone can remember, deep copying in JavaScript was not a built-in feature and we had to resort to...

Chrome devtools: Using logpoints for logging messages directly

When it comes to debugging JavaScript in Chrome devtools, there are two different camps: the console.log fans and the debugger/breakpoint maximalist. I...

How to prevent npm install for unsupported Node.js versions

npm configurations allow us to do quite a lot of nifty things. One of them is to allow the project to set...

How to terminate a process on a port using the command line

Zombie processes are usually a pain to figure out. More often than not, I end up googling about how to terminate a...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.