JS Startup

Challenges, Tips & Tricks & Tutorials

Debug JavaScript With Console Like Pro

Debug JavaScript With Console Like Pro

JavaScript Console

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.

Console Object

JavaScript console is an object which contain lot of useful method which help in debug 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 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 different color which gives us indication of 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 of console is similar to console.log() as it also do the similar stuff but it outputs a informational message to 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 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’s also print 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 show in yellow colour.

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 below code and paste it in 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 that 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 have 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 javascript function add calls an 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 pin point 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 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’) which 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 elpsed time in milisecond.

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 defined timer which is started by console.time() method.

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

Syntax:

console.timeLog(label);

15. console.group()

The console.group() method create a group messages. It also indicate the start the group of message.

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

console.group([label]);

16. console.groupCollapsed()

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

So, you need to click on 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 require 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 require a javascript object whose properties should be output.

console.dirxml(object)

Resources

  1. MDN Web Docs

Conclusion

To participate in our javascript quiz or challenges, tutorial, tips & tricks make sure to join our jsstartup newsletter. So, you can able to participate in our daily challenges & learn the javascript concept.

And last but not the least, don’t forget to like, comment and share. It gives us a morale boost to remain to continue. Also, join our Facebook Page

If you have any questions, please feel free to ask me in the comment section and also let me know if you have any suggestions. As suggestions are always welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top
0 Shares
Share via
Copy link