Debug JavaScript With Console Like Pro
By: Ajay Yadav
Tags: Javascript Tips, JavaScript, Tips And Tricks, Programming, Debugging

JavaScript console is actually a web console that helps you to get access to the browser debugging console. If you are a javascript developer then you know the importance of javascript console or web console.

Debug JavaScript With Console Like Pro

Console Object

JavaScript console is an object which contains a lot of useful methods that help in debugging the code by print the value in the web console.

Every console object method has its own benefits based on the usage factors. For example, if I just want to print something in the console the `log` method will be good.

But if i want to calculate the time taken by particular function then console.time() & console.timeEnd() will be used.

Now you want to open a console in your web browser then We can open a console in a web browser by using: Ctrl + Shift + K for windows and Command + Option + K for Mac. The console object provides us with several different methods, like log() error()

1. console.log()

A log() is the most used console` method which you can easily learn to print messages on the web console. I hope everyone is familiar with our all-rounder console.log() method because it can print anything pass to it.

Message can be a single string or javascript object and they can be multiple also with comma-separated.

Syntax:

console.log(obj1 [, obj2, ..., objN]);

console.log(msg [, subst1, ..., substN]);

But we also have some other methods like console.info(), console.warn(), console.debug() & console.error() which pretty much do the same thing.

console.log()

But they print will their values in a different color which gives us an indication of the different-different event.

For example, if we want to show an error event on the debugger console then console.error() method taking good care of it because we get a red color output in the debug console.

2. console.info()

The info() method is similar to console.log() as it also does similar stuff but it outputs an informational message to the web console.

As you can not find any difference in chrome console between info() and log() method but if you check on firefox. You’ll find a small “i” icon to be displayed next to the printed message in the Web Console’s log.

Syntax:

console.info(obj1 [, obj2, ..., objN]);

console.info(msg [, subst1, ..., substN]);

console.info()

3. console.warn()

Now, console.warn() method is an important one and it also prints the message or javascript object to the web console.

But console.warn(), outputs a warning message with a small exclamation icon next to them in the Web Console log.

console.warn() method output message layer shown in yellow color.

Syntax:

console.warn(obj1 [, obj2, ..., objN]);

console.warn(msg [, subst1, ..., substN]);

console.warn()

4. console.error()

The console.error() gives similar behavior as console.info() like that it outputs an error message with a small red cross x icon in the circle.

console.error() method output message layer show in red colour.

Method like warn() and error() shows the indication to developer to take care of it before go to production level.

Syntax:

console.error(obj1 [, obj2, ..., objN]);

console.error(msg [, subst1, ..., substN]);

console.error()

Only use console.error() method in such a place where your condition or logic fails and not in acceptable condition.

5. console.debug()

The console.debug() method also outputs a message in web console but at "debug" log level Which means that you can not easily see a console.debug() output.

To view a console.debug() output, you need to configure the console to display debug output.

Syntax:

console.debug(obj1 [, obj2, ..., objN]);

console.debug(msg [, subst1, ..., substN]);

Let’s copy the below code and paste it into the debugger console and find out yourself the difference.

console.log('console.log');

console.info('console.info');

console.warn('console.warn');

console.error('console.error');

console.debug('console.debug');

6. console.clear()

As the name says `clear()` means clear or remove all the web console log which was previously printed if the environment allows it.

The console.clear() come in handy when so much mess happens in the web console.

Syntax:

console.clear()

7. console.table()

The console.table() method is awesome because it provides a better readable presentation of the array or object. So, we always play with the object or array but sometimes it's difficult to read.

But this method helps to convert an array or an object into a table where keys act as header and data reside in the rest of the table.

It requires mandatory argument data which can be array or object. Here is the syntax

console.log(data)

8. console.count()

A console.count() method is used to log the number of times the call to count() method executes. The function also accepts an optional argument label .

If label is passed to console.count() method then the count() method logs the number of time it calls with particular label .

But if no label is passed to then `default` is shown before the count.

Syntax:

console.count([label]);

Example:

console.count(); // default: 1

console.count(); // default: 2

// or

console.count('JS Startup'); // JS Startup: 1

console.count('JS Startup'); // JS Startup: 2

9. console.countReset()

As the name suggests countReset means console.countReset() the method is used to reset the count of a particular label which is incremented by the console.count() method.

It also has an optional argument label which reset the count of defined label only.

Syntax:

console.countReset([label]);

Example:

console.count('JS Startup'); // JS Startup: 1

console.count('JS Startup'); // JS Startup: 2

console.countReset('JS Startup');

console.count('JS Startup'); // JS Startup: 1

10. console.assert()

The console.assert() method also writes an error message which is similar to console.error() and also prints the message with a red layer around it and outputs an error message with a small red cross x icon in the circle.

But it’s a conditional one which means it only prints when console.assert() receives a false the argument, but if it's true then nothing happens.

Syntax:

console.assert(assertion, obj1 [, obj2, ..., objN]); console.assert(assertion, msg [, subst1, ..., substN]);

Example:

console.assert(true === true, "JS Startup");

// Nothing print console.assert(true === false, "JS Startup");

// Assertion failed: JS Startup

11. console.trace()

The console.trace() method shows the stack track to the web console which means how the code ends up at a certain point.

Syntax:

console.trace( [...any, ...data ]);

For example, if the javascript function add calls another function sum then console.trace() method help to find out that sum is called from add function

12. console.time()

A console.time() method help to set a timer to track how long a particular operation takes.

It also has an optional label argument to pinpoint each timer with a unique name. But if you call console.timeEnd() with the same name pass to console.time() then it outputs the time in milliseconds.

The time which we get is an elapsed time since the timer started by the console.time() method.

Syntax:

console.time(label);

For example, if define executes the console.time(‘Run’) method then you run a javascript loop 100 times. After it runs the console.timeEnd(‘Run’) gives you the time taken by the javascript loop.

13. console.timeEnd()

The console.timeEnd() method stops the timer started by console.time() method and return the elapsed time in millisecond.

We already discuss this in detail in point 11.

Syntax:

console.timeEnd(label)

14. console.timeLog()

The console.timLog() method is used to log the current value of the defined timer which is started by console.time() method.

It does not interrupt the time but let you know the status of the timer. A console.timeLog() also have a label argument.

Syntax:

console.timeLog(label);

15. console.group()

The console.group() method creates a group message. It also indicates the start of the group of the message.

After calling the console.group() method, all the messages written inside the group. Here is the syntax.

console.group([label]);

16. console.groupCollapsed()

The console.groupCollapsed() method is the same as console.group() but the group which is created with this method in the collapsed mode.

So, you need to click on the disclosure button in order to show all the group messages. Here is the syntax.

console.groupCollapsed([label]);

17. console.groupEnd()

The console.groupEnd() method used to exist from the group which was either created by console.group() or console.groupEnd() .

Here is the syntax.

console.groupEnd()

18. console.dir()

The cosole.dir() method shows the list of properties in an interactive way of the specified javascript object. It represents in a hierarchical way.

It requires a javascript object whose properties should be output.

console.dir(object)

19. console.dirxml()

The cosole.dirxml() method shows the list of properties in an interactive way of the specified javascript object but in XML/HTML format. It represents in a hierarchical way.

It requires a javascript object whose properties should be output.