JavaScript Console – Pro Tips


Hello, guys here are few console tips for better debugging. 

1. console.table()

Here I have a sample JSON response:

let data = {
"data": {
"type": "articles",
"id": "1",
"title": "JSON:API paints my bikeshed!",
"body": "The shortest article. Ever."
"relationships": {
"id": "42",
"type": "people",
"title": "JSON:API paints my bikeshed!",
"body": "The shortest article. Ever."

Now if we log this data to the console we see the JSON data is folded. It will be difficult to expand and see each key-value pairs.

Instead of console.log use console.table() that will help you to read the data better.


2. Apply CSS to your logs

To apply CSS to your console logs just use %c before the string and add your styles in the second parameter. 

console-css3. console.dir()

consoledir() method is used to get the list of object properties of a specified object. 

For example, if you log the screen object you can see all the properties of the screen object.

console-dir4. is used to create a group of messages in the console. You need to provide a label name for your group. All the logs will be grouped under the provided label name.


Thanks for reading. If you know any other tips write in comments.

Also read, Vue.js Tutorial For Beginners – Introduction

Previous article3 Open Source Web Hosting Control Panels
Dileep IndLa is a software engineer. He likes to write about Programming & Bussiness related articles.You can reach to him on @facebook or you can email him at


Please enter your comment!
Please enter your name here