Using the Browser Console

The browser console is a powerful tool for web developers and can be used to diagnose and fix issues on a website. To access the console, open your browser's developer tools and navigate to the console tab.

The console can be used to execute JavaScript code, and will display any output or errors. This can be useful for debugging scripts or testing small snippets of code. Additionally, the console can be used to inspect and modify HTML and CSS on the current page, allowing for quick prototyping and experimentation.

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

Output to console

This is probably the most widely 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

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

The browser console is a powerful tool for web developers and can greatly streamline the debugging and development process.