In this article we're going to have a look at 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.warning("Computer says maybe");
  ▾ Computer says maybe

Clear console:


Execution time

Measure how long some code execution took:

  default: 6202.5400390625ms