JavaScript console.log() tips & tricks

JavaScript, Browser, Cheatsheet · Jun 12, 2021

Everyone uses the JavaScript console for logging or debugging every once in a while. But there is a lot more to the console object than console.log().

Computed property names

ES6 computed property names are particularly useful, as they can help you identify logged variables by adding a pair of curly braces around them.

const x = 1, y = 2, z = 3;

console.log({x, y, z}); // {x: 1, y: 2, z: 3}

console.trace()

console.trace() works the exact same as console.log(), but it also outputs the entire stack trace so you know exactly what's going on.

const outer = () => {
  const inner = () => console.trace('Hello');
  inner();
};

outer();
/*
  Hello
  inner @ VM207:3
  outer @ VM207:5
  (anonymous) @ VM228:1
*/

console.group()

console.group() allows you to group logs into collapsable structures and is particularly useful when you have multiple logs.

console.group('Outer');           // Create a group labelled 'Outer'
console.log('Hello');             // Log inside 'Outer'
console.groupCollapsed('Inner');  // Create a group labelled 'Inner', collapsed
console.log('Hellooooo');         // Log inside 'Inner'
console.groupEnd();               // End of current group, 'Inner'
console.groupEnd();               // End of current group, 'Outer'
console.log('Hi');                // Log outside of any groups

Logging levels

There are a few more logging levels apart from console.log(), such as console.debug(), console.info(), console.warn() and console.error().

console.debug('Debug message');
console.info('Useful information');
console.warn('This is a warning');
console.error('Something went wrong!');

console.assert()

console.assert() provides a handy way to only log something as an error when an assertion fails (i.e. when the first argument is false), otherwise skip the log entirely.

const value = 10;

console.assert(value === 10, 'Value is not 10!'); // Nothing is logged
console.assert(value === 20, 'Value is not 20!'); // Logs "Value is not 20!"

console.count()

You can use console.count() to count how many times a piece of code has executed.

Array.from({ length: 4 }).forEach(
  () => console.count('items')  // Call the counter labelled 'items'
);
/*
  items: 1
  items: 2
  items: 3
  items: 4
*/
console.countReset('items');  // Reset the counter labelled 'items'

console.time()

console.time() gives you a quick way to check the performance of your code, but should not be used for real benchmarking due to its low accuracy.

console.time('slow comp');    // Start the 'slow comp' timer
console.timeLog('slow comp'); // Log the value of the 'slow comp' timer
console.timeEnd('slow comp'); // Stop and log the 'slow comp' timer

CSS

Last but not least, you can use the %c string substitution expression in console.log() to apply CSS to parts of a log.

console.log(
  'CSS can make %cyour console logs%c %cawesome%c!',  // String to format
  // Each string is the CSS to apply for each consecutive %c
  'color: #fff; background: #1e90ff; padding: 4px',   // Apply styles
  '',                                                 // Clear any styles
  'color: #f00; font-weight: bold',                   // Apply styles
  ''                                                  // Clear any styles
);

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this