A Deep Dive to Advance Logging with JavaScript Console

Vaibhav Sharma
Geek Culture
Published in
4 min readJul 10, 2017

As a frontend developer, we always use console.log() for debugging the frontend web application. Many web developer use only 3% power of the console. Console Object is the powerful tool for debugging the client-side of any web application. Now I’m coming here with the deep knowledge of console and share with us.

Introduction to Console

The Console object can be accessed from any global object, Window on browsing scopes, and its specific variants in workers via property console. It's exposed as Window.console, and can be referenced as simply console.

Some function of Console Object which you didn’t Know

1. Console.assert()

By the use of the console.assert() function, writes an error message if the assertion is false. If the assertion gives result true no message is displayed. console.assert() function takes two arguments first is an assertion and second is an error message. If assertion return true no message is displayed otherwise an error message is displayed.

console.assert(document.querySelector('foo'),"'foo' is not found");

The result of above code of snippet if ‘foo’ is not declared.

2. Console.clear()

In this list of functions of the console, the second function is the clear() function. console.clear() function clears the console window and gives the message Console was cleared. This message is useful when a large amount of console data is displayed on console screen and you want to clear that screen. If in Google Chrome, checked the preserve log checkbox console.clear() has no effect.

3. Console.count()

console.count() function is called when we find out how many times the particular log is called. console.count() takes a label as an optional argument. If you give the label to console.count() function this function prints the result with this label.

If you call console.count() function without the label, it only prints the count of how many times console.count() called.

4. Console.dir()

console.dir() function gives a list of parts of Javascript object or function. In console.dir() prints the JSON-like object in console screen and shows every part of particular javascript object or function which is called by console.dir(). By the use of the console.dir() function we can access the child object or function of particular object or function which called by console.dir().

5. Console.table()

The most important and my favourite function of the console is console.table(). If you want to display the data in most organised format then this method is suitable for you. By the use of console.table(), you can print the array of objects and objects in a tabular format. console.table() has one mandatory argument(Object or Array of Objects).

If we want to access some properties of objects in an array of object.we restrict the data access.

6. Console.warn()

If you print a warning message in console screen, we can use the console.warn() function. console.warn() function takes an object , message and another javascript type as an argument. The warn message shown in light yellow colour in console screen.

7. Console.error()

If you print an error message in console screen, we can use the console.error() function. console.error() function takes an object , message and another javascript type as an argument. The error message is shown in red colour in console screen. console.error() function and console.exception() function works identically.

8. Console.info()

console.info() function prints the informational message in the console screen. This function is used only for informative logging task.

9. Console.log()

This function is the mainly used function by every web developer for logging the output in console screen. This function is used by the developer as a debugging tool. By the use of this function, web developer checks the output in the log at given stage.

--

--