Site icon TAAGUNG

Tips for Easier and Effective JavaScript Debugging in Browser

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 –

JavaScript Debugging
console.log() code with output
JavaScript Debugging
console.warn() code with output
JavaScript Debugging
console.info() code with output
console.error() code with output
console.trace() code with output
console.count() code with output

2. Grouping of logs

console.group() code with output
console.groupCollapsed() code with output

3. Display of logs

console.clear() code with output
console.table(array) code with output
console.table(object) code with output

4. The execution time of operation –

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>
See also  Dynamics 365 : Manage Dynamics 365 Web Resources from Visual Studio
Exit mobile version