Using JavaScript Console Objects Effectively

This article is regarding the console usage in developer tools which is present across all browsers nowadays. Using 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.

JavaScript

The first important function that can be used is asset, console which will print only if the following conditions have failed. If used in Ajax funciton, it will be very effective to print if any error happens after success method is called. In many instance we mistakenly use try and catch above an Ajax function as it will not catch any exception, that's why there is an error propertry 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,
  1. function toTestAsser(a,b){  
  2. console.assert(a>b, "the conditions failed");  
  3. }  
Output
JavaScript
Ajax code
  1. $.ajax({  
  2.         type: 'GET',  
  3.           
  4.         url: url, // url will have the service call url  
  5.   
  6.         success: function(response) {  
  7.         console.assert(response !=null"Response from the service is null : ServiceName ")  
  8.            var t = response;  
  9.   
  10.         },  
  11.         error: function(data) {  
  12.   
  13.             console.error("error on get token for authorization");  
  14.         }  
  15.     })  
Output
 
JavaScript
 
console.table()  helps in showing the iterable object [array and Objects in arrary format ] in table form , where ascending and decending is possible in console window.

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

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

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

JavaScript

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,
JavaScript 
 
Console.group() and console.groupEnd() help in diplaying response with a better look and feel, if we need to see any response in a proper way, and can be collapsed.

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

JavaScript 
 
By using 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.