The Browser Console and What It Can Do

This story is originally published at https://coderesult.com/blog/the-browser-console-and-what-it-can-do-2/

For web developers, the browser console is one of the most important tool that helps the development process continue with ease. Generally speaking console.log() overcomes its responsibilities but we can take that further and use other methods of the console object itself.

Timers

console.time() used to track how long an operation takes. It starts a timer with the name you provided and when you call console.timeEnd() with the same name, the browser will output the milliseconds elapsed since the timer was started. You can have up to 10,000 timers running on a given page.

console.time("tracking");
alert("Proceed");
console.timeLog("tracking");
alert("Proceed");
console.timeEnd("tracking");

Groups

console.group() method creates a group in the console log, and can be called more than one in order to have inner groups until console.groupEnd() is called.

console.log("Group 1");
console.group();
console.log("Group 2");
console.group();
console.log("Group 3");
console.warn("Group 3 continues");
console.groupEnd();
console.log("Group 2 continues");
console.groupEnd();
console.log("Group 1");

Styling the Output

Using %c directive with the logging gives you ability to add styling to your logs

console.log("Boring message: %cred %corange", "color: yellow; background-color:black", "color: orange; background-color: red", "boring message continues");

Tables

The console.table() method displays the data as a table.

// an object whose properties are objects
class Animal {
  constructor(name) {
    this.name = name;
  }
}
var animalKingdom = {};

animalKingdom.lion = new Animal("Lion");
animalKingdom.elephant = new Animal("Elephant");
animalKingdom.snake = new Animal("Snake");

console.table(animalKingdom);

Asserting

console.assert() method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens.

const errorMsg = 'the # is not divisible by 3';
for (let number = 1; number <= 15; number += 1) {
    console.log('the # is ' + number);
    console.assert(number % 3=== 0, {number: number, errorMsg: errorMsg});
}

Counting

console.count() logs the number of times that this particular call to count() has been called. If a name is not provided the name becomes default

let bar = "";

function foo() {
  console.count(bar);
  return "hi " + bar;
}

bar = "john";
greet();
bar = "jane";
greet();
greet();
console.count("jane");
console.count()

Tracing

The console.trace() method outputs a stack trace to the console.

function x() {
  function y() {
    console.trace();
  }
  y();
}

x();

Viewing Properties

The method console.dir() displays the list of the properties of the provided JavaScript object as an argument. The output is presented as a hierarchical collapsable listing that let you see the contents of child objects.

Profiling

The console.profile() starts recording a performance profile based on the browser profiling tools.

If you provide an argument to name the profile, this enables you to stop only that profile if multiple profiles are being recorded.

To stop recording call console.profileEnd().

Clearing

Last but not least, console.clear() clears everyting that has been logged.