In Focus

Using JavaScript Console Objects Effectively

This article explains the use of console object effectively and various types and inbuilt function.

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.


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. }  
Ajax code
  1. $.ajax({  
  2.         type: 'GET',  
  4.         url: url, // url will have the service call url  
  6.         success: function(response) {  
  7.         console.assert(response !=null"Response from the service is null : ServiceName ")  
  8.            var t = response;  
  10.         },  
  11.         error: function(data) {  
  13.             console.error("error on get token for authorization");  
  14.         }  
  15.     })  
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.

  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) 

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 


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 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.

  1. function testConsoleGroup() {  
  2."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");  
  10. }  

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.