Five Must Know Javascript Console Tricks in 2017

JavaScript Console Tricks

Do you know about console.table()? Here we will learn to add styles to our javascript console output. We will also learn about advanced console tricks to debug better. I will ask you to use chrome for this. Let’s jump into this right now.

Console Tricks with Same old console.log()

Most of us seen how facebook warns people not to paste any code inside the javascript console. If you yet not seen that now its time to do the same. There is nothing fancy going on here. We can add CSS styles to our console output. Open the javascript console (ctrl + shift + I) and paste the following code.

Console output Style

Is not it a cool way to attract attention?

Now say you have array of objects like this one

Now try to print this one with console.table(arr) You should see a table eye soothing structure like this one

console.table

There are different console methods for different situations likewarn error, debug console javascript

  • console.debug() – For debug – Blue text
  • console.warn() – Warning – Yellow Text
  • console.error() – Error occurred – Red Text

You should probably start using above methods in your javascript code to properly differentiate log messages.

 

 

 

Now let’s say you have three different objects.

You can print them all in a single console.log by separating them using commas.

Test a new javascript library in a console

I can always try different javascript library without creating an HTML file. Just open your console and paste this. Obviously, you need to change the CDN URL with your desired library’s CDN.

Thus you can check any library quickly.

Thank you for reading this article. If you have any tricks to share please comment here. I will try to add them here.

Free Email Updates
Get the latest content first.
We respect your privacy.

2 thoughts on “Five Must Know Javascript Console Tricks in 2017

  1. I use often console.dir(); for objects and console.info(); for annotations.
    console.assert(); provides basic testing capabilities for TDD in console.
    console.count(); is a nice way to track iterations.

Leave a Reply

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