Go beyond console.log() with these powerful debugging techniques

The console is really a handy functionality in the browser, you can debug, visually see what's happening. Here I curated Some console methods that you should know to increase your productivity.

Let's Look into those in this blog.

1. Our very own console.log() , It will just print/display the content

console.log() is the common way in which we will just print the output in the browser console

The other 4 methods shown below also just display only differences is in the way they are presented

2) These four, **debug**, **info**, **warn**, **error** just displays the content just like the log()

console.debug("Debug") console.info("Info") console.warn("Warn") console.error("Error")

3) Do you know you can make your console colorful?

You can make the console.log() more beautiful by using custom CSS, an example is shown below

In the above one, we used %c as a placeholder for which values should be inserted into the output of our console.

4) console.dir() Method

console.dir() is another method that is almost like console.log() except it shows the content in JSON format.

5) Printing the data in a table format

You can print your data in a table format using console.table() .It is really a handy method to use if you are using any API kind of thing. You can visually see how data is received

6) Grouping

We can group in mainly 3 different ways.

1. group defaults to having the group open
2. groupCollapsed by default closed in the console
3. groupEnd closes off the current group

.As their name suggests they are for grouping, grouping with closed format, and closing the current group respectively.

7. Performance-Based Logging Methods.

You can know the performance of a function using these two logging methods. Normally they can be divided into two

1. Timing Related
2. Profiler Related

Time-Based Logging.

You can find out the actual time required for a function to execute in this way

Profiler Logging.

The key difference from time logging is instead of using a starting/stopping a simple timer it starts/stops the profiler built into the dev tools of your browser.

8. Trace Method()

The trace() method displays a trace that shows how the code ended up at a certain point.

9. The Clear method()

The clear method will clear everything from the console and this is my favorite.

just write console.clear() and boom!

Conclusion

So we have discussed different console methods like

1. console.log()
2. console.debug()
3. console.info()
4. warn
5. console.error()
6. console.table()
7. console.time()
8. console.group()
9. console.trace()
10. console.groupEnd()
11. console.groupcollapse()
12. console.profile()
13. console.dir()
14. colors in console

There are furthermore console methods and I leave you to check them out

You can connect with me on Twitter and I will be glad to see you there

Keep Learning, Keep Updated