Using JavaScript Console Objects Effectively


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,
  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 array format ] in table form, where ascending and descending is possible in the 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 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,
JavaScript 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.
  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 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.