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, …]
*/
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, …]
*/
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, …]
*/
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.
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');
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)