How to get the most out of the JavaScript console
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.