How to get the most out of the JavaScript console

In notebook:
Article Notes
Created at:
2017-07-09
Updated:
2017-07-09
Tags:
JavaScript

Original Article: How to get the most out of the JavaScript console by Darryl Pargeter

  • log
  • info
  • warn
  • error

###String substitutions

Input: console.log('string %s', 'substitutions') Output: string substitutions

If you want to log out an object, you need to use %o or %O instead of %s.

  • %o for objects
  • %i or %d for integers
  • %f for floating-points
  • %c applies the provided CSS

You can also use ES6 template literals, but you need to use substitutions with %o to see the object details.

###Shows how to apply CSS to the log output

See the original article for the demo...

###Other available methods

####Assert()

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

####Dir()

Displays a clickable tree of the object passed to it.

console.dir(document.body)

####Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

####Group()

Can group console logs with indents:

console.group();
console.log('I will output');
console.group();
console.log('more indents')
console.groupEnd();
console.log('ohh look a bear');
console.groupEnd();

####Time()

You need to start it, then stop it:

// start
console.time('id for timer')
// end
console.timeEnd('id for timer')

This will output this format:

timer: 0.57ms

You can have 10 000 timers running simultaneously.