Post
Ask Question

All About Effective JavaScript Debugging In Browser Using Console Object

Introduction

 
For debugging of our JavaScript code, we use console.log object a lot. This helps us to determine and troubleshoot the issue on a web page in the browser. This console object can be used during the development process and also enables the developer to see the value of an expression in the specific page context. In general, it facilitates monitoring, writing, and evaluating in the browsers' developer tool (F12).
 
There are a few more important members of this Object and that can make our debugging a lot easier.
 

Tracing of the Operation/Step

  • console.log()– this is used for logging any type of message in the console.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.log() code with output
  • console.warn()– it prints the message in the console as a warning with method information with a yellow warning sign.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.warn() code with output
  • console.info()– it prints the information in the console. It can be used interchangeably with console.log but the purpose of using console.info restricts the messages to be information type.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.info() code with output
  • console.error()–It prints the console message with a red icon and can be very easily identifiable.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.error() code with output
  • console.trace()– it provides the stack trace of the method where it is being called from.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.trace() code with output
  • console.count()– It gives the count of a specific method call.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.count() code with output

Grouping of logs

  • console.group()– This can be used to group similar logs. By default, it will be expanded. It can have nesting of other groups as well.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.group() code with output
  • console.groupEnd()–it marks the end of any group.
     
  • console.groupcollapsed()–it is the same as console.group but it remains collapsed by default.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.groupCollapsed() code with output

Display of logs

  • console.clear()–if you don’t need previous logs and want to start over, Console.clear will clear the console and only subsequent logs will be written thereafter.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.clear() code with output
  • console.table()–This is a very useful way of viewing the data in tabular format. This table can be sorted by any column by clicking any header.
     
  • Case a) If we are passing an array as parameter, then it shows the first column as the index. 
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.table(array) code with output
  • Case b) If the passed parameter is an object then we can have a custom column.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.table(object) code with output

The execution time of operation

  • console.time()–It marks the start of any operation. We can also use a label to make it identifiable among many times.
     
  • console.timeEnd()– It marks the end of any operation and is printed with the used label.
     
    Tips For Easier And Effective JavaScript Debugging In Browser
    console.time() code with output
There are a few more methods in console object but most of them are not standard and not supported by all the browsers.
 
This article was originally published on taagung and the complete code used in this article is available here for your practice.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>    
  4.     <h1>JavaScript console Introduction</h1>    
  5.     <script>            
  6.         console.log("My New Log");    
  7.         console.info("this is info log");    
  8.         console.error("Error log");    
  9.         console.warn("Warning log");    
  10.         console.group("Parent Group");    
  11.         console.groupCollapsed("My New Group");    
  12.         console.log("Begininig of the group");    
  13.         console.log("Log Number #1");    
  14.         console.log("Log Number #2");    
  15.         console.log("Log Number #3");    
  16.         console.groupEnd();    
  17.     
  18.         console.log("Out of the Group now");    
  19.         console.groupEnd();    
  20.     
  21.         console.clear();    
  22.         console.table(["taagung", "C# Corner", "MSDN"]);    
  23.     
  24.         function Article(authorName, articleName) {    
  25.             this.authorName = authorName;    
  26.             this.articleName = articleName;    
  27.         }    
  28.         var author = {};    
  29.     
  30.         author.atul = new Article("Atul Sharma", "SOUND Programming Methodology");    
  31.         author.tuba = new Article("Tuba Mansoor", "Angular Tutorial");    
  32.         author.mahesh = new Article("Mahesh Chand", "C# Corner Plateform");    
  33.     
  34.         console.table(author);    
  35.     
  36.         myFirstMethod();    
  37.             
  38.     
  39.         function myFirstMethod() {    
  40.             mySecondMethod();    
  41.         }    
  42.     
  43.         function mySecondMethod() {    
  44.             myThirdMethod();    
  45.                 
  46.         }    
  47.     
  48.         function myThirdMethod() {    
  49.             console.trace();    
  50.         }    
  51.     
  52.         TimeElapsed();    
  53.         function TimeElapsed() {    
  54.             console.time("PositiveForloopTime");    
  55.             for (var i = 0; i < 100000; i++) {    
  56.                     
  57.             }    
  58.             console.timeEnd("PositiveForloopTime");    
  59.     
  60.             console.time("NegativeForloopTime");    
  61.             for (var i = 100000; i < 0; i--) {    
  62.                     
  63.             }    
  64.             console.timeEnd("NegativeForloopTime");    
  65.         }    
  66.     
  67.         CalledFunction();    
  68.         CalledFunction();    
  69.         CalledFunction();    
  70.     
  71.         function CalledFunction() {    
  72.             console.count("Called Count");    
  73.         }    
  74.     </script>    
  75.     
  76. </body>    
  77. </html>   


Similar Articles