DEV Community

Cover image for Our favorite browser console one-liners
J. for Everly Health

Posted on

Our favorite browser console one-liners

Here are a few one-liners to use in your browser console to look and feel like a pro 😁!

"$$ bill y'all!" 🎶

Not too long ago, I found myself in the browser wanting to know how many elements were being rendered to the DOM before and after a certain change. After some creative googling, I found out that using $$('*') will output an array of all rendered elements!

// ran in the browser console on google.com
$$('*')

/** output
(320) [html, head, meta, meta, meta, meta, link, …]
*/
Enter fullscreen mode Exit fullscreen mode

Diving a bit deeper revealed this is just running document.querySelectorAll under the covers which made me vow to never type this out in a browser console ever again.

// ran in the browser console on google.com
$$('path')

/** output
(16) [path, path, path, path, path, path, …]
*/
Enter fullscreen mode Exit fullscreen mode

Diving all the way in the rabbit hole, I discovered that you can use $('//<xpath>') where <xpath> can be replaced with an element path. This is similar to what we were doing before, but with the added benefit of querying for specific nested elements.

For example, in order to get a list of div elements on the page that happen to contain an a element...

// ran in the browser console on google.com
$x('//div[descendant::a]')

/** output
(41) [div.L3eUgb, div.o3j99.n1xJcf.Ne6nSd, …]
*/

Enter fullscreen mode Exit fullscreen mode

Storing variables from debugger breakpoints

Referenced here, this is a cool way to store a scoped variable somewhere even after exiting its scope while debugging.

Watch a value with a live expression

Live expressions allow you to type one or more expressions once and then pin them to the top of your console with the values updating in real time.

To use, click the live expression icon in your console toolbar to create a new live expression. Once entered, click outside of the live expression text box to save.

Using live expressions in chrome

What about the console stuff?

Ben Marshall wrote a great tl;dr on his blog post around browser console commands, so i won't re-invent the wheel, but will share here for convenience :)

// Depending on the message, console.log may not be the best choice.
console.log('For general output of logging information.');
console.info('Informative logging of information.');
console.debug('Outputs a message to the console with the log level debug.');
console.warn('Outputs a warning message.');
console.error('Outputs an error message.');
console.assert(number % 2 === 0, {number, 'Log a message and stack trace to console if the first argument is false.'});
console.clear(); // Clears the console.
console.count(); // Log the number of times this line has been called with the given label.
console.dir(objectVar); // Displays an interactive list of the properties of the specified JavaScript object.
console.group(); // Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
console.groupEnd(); // See the command above.
console.memory; // The memory property can be used to check out the heap size status.
console.table([]); // Displays tabular data as a table.
console.time(); // Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
console.timeEnd(); // Stops the specified timer and logs the elapsed time in seconds since it started.
console.trace(); // Outputs a stack trace.

// You can also apply custom CSS styles.
console.log('%c Message with a background', 'color:white;font-size:2em;background:teal');

Enter fullscreen mode Exit fullscreen mode

Conclusion

These are our favorites, but by no means is this list comprehensive. Tell us your favorites in the comments!

Thanks

Special thanks to @pnarielwala for contributing to this article! Be sure to follow us for more 😁

Top comments (0)