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:


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

%i or %dInteger
%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:

▾ Object { a: 1, b: 2 }
  a: 1
  b: 2

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


Output an object using table

| (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


Execution time

Measure how long some code execution took:

default: 6202.5400390625ms