JavaScript Console – Pro Tips

413
views

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.

console-table

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. console.group()

console.group() 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.

console-group

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 admin@watchdown.com
SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here