Console cheat sheet for JavaScript developers

June 27, 2020

You can open console by using

Chrome → Ctrl Shift J (on Windows) or Cmd 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");

image

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"
    }
}