Stuff you can do with the console object that isn't a log 🪵
Check It Out
At short notice (30mins 😱) I needed to prepare a quick presentation on a front end topic. I went with highlighting some of the extra functions available on the console object that aren't log(). I threw together a quick web page that I used along side the dev tools console during the presentation.
console.table()
1console.table(['Moose', 'Beans', 'Dill']);
2
3console.table({
4 fruit: ['Apple', 'Pak Choi', 'Carrot'],
5 prices: ['£1', '£2', '£3'],
6});
console.count()
1function count() {
2 console.count('You have clicked the button this many times ->');
3}console.time()
1async function time() {
2 console.log('Starting timer');
3 console.time('Time taken');
4
5 await wait(500);
6
7 console.log('Timer ended');
8 console.timeEnd('Time taken');
9}console.error()
1function error() {
2 console.warn('Aghr! A warning!!');
3 console.error('Oof! An error has occurred!!');
4}console.group()
1function group() {
2 console.log("This is the outer level");
3
4 console.group('Group 1');
5 console.log("Level 2");
6 console.log("Another log in Level 2");
7
8 console.group();
9 console.log("Level 3");
10
11 console.groupEnd();
12 console.log("Back to level 2");
13
14 console.groupEnd();
15 console.log("Back to the outer level");
16}