How to use the browser console effectively for JavaScript Developers

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.

This is image title

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. This is image title

console.error()

Outputs an error message to the console.

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

This is image title

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()

This is image title

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);

This is image title

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

This is image title

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

This is image title

console.table(obj)

This prints the objects in table format

var user = {
    name : "Ram",
    age : 28

}
console.table(user);

This is image title

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

This is image title

Thanks for reading !

javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.