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 sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

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.