DEV Community: J.

Our favorite browser console one-liners

J. — Tue, 25 Jan 2022 15:53:16 +0000

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 😁

Our favorite javascript one-liners

J. — Tue, 04 Jan 2022 15:53:17 +0000

These are our favorite one-liners that we've used and forgot existed because they work so well 😁.

Generate a random hex color

const color = () => '#' + Math.floor(Math.random() * (0xffffff + 1)).toString(16).padEnd(6, '0');

Remove array duplicates

const removeDuplicates = arr => [...new Set(arr)];

Reverse a string

const reverseString = str => [...str].reverse().join()

Clear all cookies

Note: This will not always work because cookies can be set to not be changed from the front-end. (Thanks @lukeshiru!)

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;expires=${new Date(0).toUTCString()};path=/'));

Remove falsy values from an array

const removeFalsyValues = arr => arr.filter(x=>x)

/** OR **/

const removeFalsyValues = arr => arr.filter(Boolean)

Get the value of a query parameter from a url

Pass in the url and the parameter that you're looking for the value of, and this function will return the value to you

const getQueryParam = (url, param) => new URL(url).searchParams.get(queryParam);

Copy to clipboard

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

Get selected text

const getSelectedText = () => window.getSelection().toString();

Scroll to Top

const scrollToTop = () => window.scrollTo(0, 0);

Scroll to Bottom

const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);

Toggle a Boolean

const toggleBool = bool => !bool;

Convert Fahrenheit / Celsius

const cToF = (celsius) => celsius * 9/5 + 32;
const fToC = (fahrenheit) => (fahrenheit - 32) * 5/9;

Check if a property exists on an object

I know this seems like more than a one-liner, but given an object already exists, checking for properties on that object is definitely a one-liner 😁

const myObject = {
  id: 1,
  name: 'Tron',
  group: 'decepticons'
};

const isGroupExists = 'group' in myObject;
console.log(isGroupExists); // true

const isMusicExists = 'music' in myObject;
console.log(isMusicExists); // false

Thanks

Special thanks to Fernando, José, @patricia_br, @lukeshiru, @lionelrowe and @jonrandy for adding to this list and optimizing!