Using JavaScript Console Objects Effectively

Introduction

This article is regarding the console usage in developer tools which is present across all browsers nowadays. Using the console effectively helps us in tracing a defect or debugging any JavaScript that arises during or after development. Most of us use console.log() which will be very effective for tracing and debugging purposes.

There are various built-in Console functions that can be used as you can see in the below screenshot.

The first important function that can be used is an asset, a console which will print only if the following conditions have failed. If used in the Ajax function, it will be very effective to print if any error happens after the success method is called. In many instances we mistakenly use try and catch above an Ajax function as it will not catch any exception, that's why there is an error property for Ajax function and still, we use console log inside the Ajax error function.

The effective way of using it in Ajax is shown below,

function toTestAsser(a,b){
console.assert(a>b, "the conditions failed");
}

Output

Ajax code

$.ajax({
type: 'GET',
url: url, // url will have the service call url
success: function(response) {
console.assert(response !=null, "Response from the service is null : ServiceName ")
var t = response;
},
error: function(data) {
console.error("error on get token for authorization");
}
})

Output

console.table() helps in showing the iterable object [array and Objects in array format ] in table form, where ascending and descending is possible in the console window.

Code

var arr = "This is array of objects or iteratable items"
arr = arr.split(" ") // output ["This", "is", "array", "of", "objects", "or", "iteratable", "items"]
console.table(arr)

Output

console.trace(), helps in tracing the error that has occurred if long chaining of function is used.

console.time() and console.timeEnd() helps in finding how much time exactly a function took to execute

Another handy function is XML data, console.dir(obj) which will convert the object based on javascript notation and console.dirXml(obj) which will convert to object in XML format.

Other console functions,

Console.group() and console.groupEnd() help in displaying response with a better look and feel, if we need to see any response in a proper way, and can be collapsed.

Code

function testConsoleGroup() {
console.group("User Obj"); // same lable name should be used - User Obj
console.log("user 1");
console.log("user 2");
console.log("user 3");
console.log("user 4");
console.log("user 5");
console.groupEnd("User Obj");
}

Output

By using the default console function that I have mentioned, we can effectively use and debug JS files rather than just console.log() for all information. There are still a lot of functions to explore.