Console Debugging — It’s More Than Console.log()

5 min readAug 31, 2023

One of the most important concepts that every programmer understands is debugging. The idea helps software developers when they encounter errors or when the product fails to produce the desired outcome. Developers can then use this to determine the cause of faults and errors.

To debug web applications, a web console is a tool that is mainly used to log the information.

Most of the developers are only familiar with console.log(). But that not only the method you can use while debugging.

The console object provides multiple methods to use. In this tutorial, you will learn the uses of JavaScript console methods.

1. console.warn()

To log a warning message to the console in JavaScript, use the console.warn()method. The output console has a yellow warning icon and a warning message with one or more parameters of any data type.

console.warn('WARNING: This is warning');

2. console.error()

An error message and error icon are logged to the console using JavaScript’s console.error() method. It is used to notify that a programming error or exception has occurred, potentially leading to the failure of the application. For example, you have a piece of code, and an exception occurs during the exception. In the below example, you can observe that while dividing the 2 by 0, an exception occurs, a catch block is executed, and the error is logged.

try {
    const a = 2 / 0;
    console.log("Result : ", a);
} catch(error) {
    console.error("This is an error")
}

3. console.assert()

Use console.assert() method writes a message to the console based on a condition. It prints message to console only If the first argument expression evaluates to false.

console.assert(document.getElementById("emailID"), "Element Not Found");

4. console.count() and console.countreset()

The console.count() method is used to write a message on the console as the number of times it is called.

for (var i = 1; i <= 5; i++){
    console.count('index');
}

The message is designated “default” by default, but you can modify it by giving it as a parameter. Use the console.countreset() method to reset the counter so that you can use it again.

for (i = 1; i <= 5; i++){
    console.count();
}
console.countreset();

5. console.time(), console.timeLog() and console.timeEnd()

To track how long an action takes, use the console.time() function to start a timer. Before beginning the operation, use the time function to start the timer and the console.timeEnd() function once the operation is completed. You can use this to determine how long a given application operation takes.
You may also use console.timelog()in your code to print the current time. This will not start or stop any timers, but will only print the current timestamp. The output of the following code reveals that the entire code is executed in 0.51 ms, and during the execution, we just log the timeLog, which is timeStamp.

console.time("answer time");
for (let i = 1; i <= 5; i++){
    console.log('index', i);
}
console.timeLog("answer time");
for (let i = 1; i <= 5; i++){
    console.log('index', i);
}
console.timeEnd("answer time");

6. console.group() and console.groupend()

To create a group of messages on the browser console, use the console.group() function. This will begin message grouping next to it. Then, using the console.groupend()function, end a previous group. You can also try the nested groups.

console.log('Outside the Group');
console.group('Group Number 1');
console.log('Inside the Group 1');
console.log('Inside the Group 2');
console.log('Inside the Group 3');
console.log('Inside the Group 4');
console.groupend('Group Number 1');

7. Table

Use console.table() method to print an object in form of table on browser console. You can see in the below example that without table, the objects on the console looks very messy and using table it illustrates in the form of table.

var user1 = {'email': 'abc@yahoo.com', 'name':'User 1 - ABC'};
var user2 = {'email': 'xyz@yahoo.com', 'name':'User 2 - XYZ'}
console.log(user1, user2);
console.table({user1, user2});

8. Clear

The JavaScript console.clear() method is used to clear the console window of the browser’s developer tools. It erases all previously logged messages and any other output that was previously displayed in the console, making the console window blank and ready for new messages.

console.clear();

9. Customized log messages using CSS:

Developers can also tailor the log message to their specific requirements. You can apply CSS styling and give it as a second argument to the console.log function.

console.log("%c This is the Error Message", "color: green; background-color: yellow; border: solid lightblue");

In a nut shell, JavaScript console methods are a strong set of tools for debugging and optimizing web applications. You may easily inspect and manipulate objects, measure performance, and log messages to the console by utilizing these methods. I hope this tutorial has given you a good understanding of these strategies and inspired you to investigate them further in your own projects.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/console