Better debugging with Console Utilities API

There are some built-in console utilities to improve JavaScript debugging. These utilities make debugging faster. Let's learn about these utilities.

NOTE: All these utility things only work on dev tools console. They will not work in scripts.

The page used is https://example.com

$_

You can use $_ to get the last evaluated value.

$0, $1, $2, $3 and $4

You can use these to reference recently accessed elements in the console. You can access elements using the "Elements" tab. $0 returns the most recently accessed element, $1 returns the second most recently accessed variable, the rest of these works in the same way.

Example

1. Accessing an element
2. Referencing the element in the console

$() and $$()

You can use these utility functions to find an element in the document. $() is basically an alias for document.querySelector(), and $$() is for document.querySelectorAll().

For both of these function, the first parameter is the selector you want to find, i.e. - $('.sel') basically means document.querySelector('.sel') and $$('.sels') means document.querySelectorAll('.sels').

There is also an optional second parameter, this should be a Node or Element in which the selector should be searched. Like before, $('.sel', element) basically means element.querySelector('.sel') and $$('.sels', element) means element.querySelectorAll('.sels').

Example

$()

$$()

copy()

You can use this utility function to copy the string representation of any object to the clipboard.

Example

keys() and values()

keys() is just an alias for the Object.keys method and values() is alias for the Object.values method.

Example

Bonus tricks

Saving a logged object in the console

Multiline text with Shift + Enter key combination

That's all for now. See you next time!