Tricks that you don’t know about your developer tool.

When you start to work with Javascript as a new developer, the developer tool console.log() becomes your best friend. But, besides console.log(), there are many more tools that you can use. This post is intended to be useful for beginners.

Do you know you can actually style you console.log() with the %c?

console.log(“%c Hello World”, “font-size:50px; background: yellow”)

console.log(‘I am %cpink %cand you are %cpurple.’, ‘color: red;’,””, ‘color: purple;’);

When I’m testing my code, I alway use console.log(), however, we can use a tool called console.error().

if(3 < 2 < 1){
   console.error("what the hell???")
}
else{
   console.log(“I know 1 is not equal to 2”)
}

Note: console.assert() fires only when something is wrong. If the statement is true, nothing will happen.

console.assert(1===2, “this is not true”)

console.clear() will clear out everything you have on your console.

console.clear();

console.dir() displays a list of the properties of the specified JavaScript object. You can use it to find the object’s children, firstChild, etc.

console.dir(); 

Ever wonder how long does it take for your fetch request to get the response back? Use console.time() && console.end()

Don’t know how many dogs you have? console.count() is here to help.

If you want to display an array of data, use console.log(), it will look like this

console.log(pupsArray)

Instead of console.log(), we can user console.table(), much nicer, isn’t it.

console.table(pupsArray)

I hope these tricks make your debugging a bit more productive. Thank you for reading, let me know if you have any tips on the developer’s tool.