Using the Browser Console

Here are a couple of tricks you can use in your browser console.

Output to console

This is probably the most used debug technique:

console.log("test");
test

Output multiple values

let year = 2020;
let age = 99;
console.log(age, year);
99, 2020

Output with formatting

Specifiers can be used to achieve string interpolation:

let year = 2020;
let age = 99;
console.log('It is %i and I am %i years old.', year, age);
It is 2020 and I am 99 years old.

Available Specifiers

SpecifierOutput
%sString
%i or %dInteger
%fFloat
%oOptimal formating for collections
%OExpandable data
%cCSS style

Output with style

Here is how to use the `%c` specifier mentioned above:

console.log('%c Seeing red', 'color: red');
Seeing red.

Output an object

We can output objects directly via:

console.dir({a:1,b:2});
▾ Object { a: 1, b: 2 }
  a: 1
  b: 2
  ...

... but we can also show a JSON-ifyed version:

console.log(JSON.stringify({a:1,b:2}));
{"a":1,"b":2}

Output an object using table

console.table({a:1,b:2});
---------------------
| (index)  | Value  |
---------------------
| a        | 1      |
| b        | 2      |
--------------------- 

Output a variable using template literals ES6

let width = 100;
console.log(`width is: ${width}`);
width is: 100

Log errors & warnings

console.error("Computer says no");
⛔️ ▾ Computer says no
console.warn("Computer says maybe");
⚠️ ▾ Computer says maybe

Clear console

console.clear;

Execution time

Measure how long some code execution took:

console.time('id1');
...
console.timeEnd('id1');
default: 6202.5400390625ms