How to use the browser console effectively for JavaScript Developers

This article will show you how to use the browser control panel effectively to debug.

You can open console by using:

Chrome → Ctrl Shift J (on Windows) or Ctrl Option J (on Mac)
Safari → Option-Cmd-C

The console object provides access to the browser’s debugging console. The console object present in the global scope.

console.log(messages)

Outputs a message(variable) to the web console.

console.log("hello");
hello
var a =10;
console.log(a);
10
var b = 20;
console.log(a, b);
10, 20
// we can also evaluate expression 
console.log(a+b);
30
console.log(`${a} + ${b} = ${a+b}`);
10 + 20 = 30
var obj = {name : "Javascript Jeep"};
console.log(a, b, obj)
10 20 {name: "Javascript Jeep"}

console.clear()

This will remove all the console message and prints Console was cleared.

console.clear();

console.assert(condition, failure message)

The console.assert method is an easy way to run simple assertion tests.

var a = 10; 
console.assert(a === 10, "This will not be printed");
console.assert(a != 10, "this will be printed", `a = ${a}`);
// Assertion failed: this will be printed a = 10

console.count()

Logs the number of times that this particular call to count() has been called.

function test() {
  console.count();
}
test(); // default : 1 
test(); // default : 2
test(); // default : 3
Example 2 :
We can also use label to it
function test(label) {
  console.count(label);
}
test("Times"); // Times: 1
test("Num"); // Num: 1
test("Times"); // Times: 2
test("Num"); // Num: 2
test("Times"); // Times: 3
test("Num"); // Num: 3

console.countReset()

Resets the counter. This function takes an optional argument label.

console.count(); default: 1
console.count(); default: 2
console.count(); default: 3

console.countReset()

console.count(); default: 1

console.count("time"); time: 1
console.count("time"); time: 2
console.count("time"); time: 3

console.countReset()

console.count("time"); time: 1

Siblings of console.log

console.info()

Prints a message to the console.

console.info("this is a info");

Only in Firefox, a small “i” icon is displayed next to these items in the console’s log.

Other than this, it is similar to console.log method.

console.warn()

Outputs a warning message to the console.

console.warn("this is a warning ⚠️ ");
Example
let temp = 90;
if(temp > 90) {
   
    console.warn("Temp is high");
}

The warning message will be printed with a yellow background.

console.error()

Outputs an error message to the console.

console.error("this is error message");

console.trace()

Output the stack trace to the current function to the console.

function a() {
   b();
}

function b() {
   c() 
}

function c() {
  console.trace()
}

function test() {
  a();
}

test()

console.dir()

prints out objects in a nice formatted way

var obj = {
   "phone" : {

mobile : {
            num1 : 123,
            num2 : 456,
        },
    landline : {
            num1 : 789
        }
    },
    "name" : "Javascript Jeep"
}

console.dir(obj);

console.dirxml()

It prints out a DOM element’s markup.

console.dirxml(document.body);
// this will display body of the html element

console.time(label) and console.timeEnd(label)

We can start a timer with console.time and then end it with console.endTime. By using this we can find the time taken to execute a function.

function a () {
  for(let i = 0 ;i < 10000; i ++) {
       // operation;
  }
}
console.time();
a();
console.timeEnd();  // default: 0.18896484375ms
console.time("test");
a();
console.timeEnd("test"); // test: 0.35302734375ms

Grouping console messages

console.group("days")
  console.log("Mon");
  console.log("Tue");
  console.log("Wed");
  console.log("Thu");
  console.log("Fri");
  console.log("Sat");
  console.log("Sun");
console.groupEnd("days")

We can group inside groups

console.group("days")
   console.log("Mon");
   console.log("Tue");
   console.log("Wed");
   console.log("Thu");
   console.log("Fri");
   console.group("holidays");
      console.log("Sat");
      console.log("Sun");
   console.groupEnd("holidays");
console.groupEnd("days")

console.table(obj)

This prints the objects in table format

var user = {
    name : "Ram",
    age : 28
    
}
console.table(user);

var user2 = {
    name : "Ram",
    age : 28,
    address : {
      street : "144 straight stree"
    }
}

Thanks for reading !

#javascript