Tips for Easier and Effective JavaScript Debugging in Browser

Atul Sharma
Latest posts by Atul Sharma (see all)

For debugging of our JavaScript code, we use console.log object a lot. This helps us to determine and troubleshoot the issue in web application in the browser, so it is only available to the browser’s developer mode (F12).

There are few more members of this Object and that can make our debugging a lot easier.

1. Tracing of the Operation/Step –

  • console.log() – this is used for logging any type of message in the console.
JavaScript Debugging
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.
JavaScript Debugging
console.warn() code with output
  • console.info() – it prints the information in console. It can be used interchangeably with console.log but the purpose of using console.info restricts the messages to be information type.
See also  Angular Tutorial for Beginners – Part 4 : Interfaces
JavaScript Debugging
console.info() code with output
  • console.error() – It prints the console message with a red icon and can be very easily identifiable.  
JavaScript Debugging
console.error() code with output
  • console.trace() – it provides the stack trace of the method where it is being called from.
JavaScript Debugging
console.trace() code with output
  • console.count() – It gives the count of a specific method call.
JavaScript Debugging
console.count() code with output

2. 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.
JavaScript Debugging
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.
JavaScript Debugging
console.groupCollapsed() code with output

3. 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.
JavaScript Debugging
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. 
JavaScript Debugging
console.table(array) code with output
  • Case b) If the passed parameter is an object then we can have a custom column.
JavaScript Debugging
console.table(object) code with output

4. 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 printed with the used label.
See also  SOUND – S for Secure Programming #3 | OWASP #3 | Sensitive Data Exposure
JavaScript Debugging
console.time() code with output

There are few more methods in console object but most of them are not standard and not supported by all the browsers.

Complete code used in this article is available here for your practice and effective JavaScript debugging-

<!DOCTYPE html>
<html>
<body>

    <h1>JavaScript console Introduction</h1>



    <script>

        
        console.log("My New Log");
        console.info("this is info log");
        console.error("Error log");
        console.warn("Warning log");
        console.group("Parent Group");
        console.groupCollapsed("My New Group");
        console.log("Begininig of the group");
        console.log("Log Number #1");
        console.log("Log Number #2");
        console.log("Log Number #3");
        console.groupEnd();

        console.log("Out of the Group now");
        console.groupEnd();

        console.clear();
        console.table(["taagung", "C# Corner", "MSDN"]);

        function Article(authorName, articleName) {
            this.authorName = authorName;
            this.articleName = articleName;
        }
        var author = {};

        author.atul = new Article("Atul Sharma", "SOUND Programming Methodology");
        author.tuba = new Article("Tuba Mansoor", "Angular Tutorial");
        author.mahesh = new Article("Mahesh Chand", "C# Corner Plateform");

        console.table(author);

        myFirstMethod();
        

        function myFirstMethod() {
            mySecondMethod();
        }

        function mySecondMethod() {
            myThirdMethod();
            
        }

        function myThirdMethod() {
            console.trace();
        }

        TimeElapsed();
        function TimeElapsed() {
            console.time("PositiveForloopTime");
            for (var i = 0; i < 100000; i++) {
                
            }
            console.timeEnd("PositiveForloopTime");

            console.time("NegativeForloopTime");
            for (var i = 100000; i < 0; i--) {
                
            }
            console.timeEnd("NegativeForloopTime");
        }

        CalledFunction();
        CalledFunction();
        CalledFunction();

        function CalledFunction() {
            console.count("Called Count");
        }
    </script>

</body>
</html>