Saturday 27 October 2018

JavaScript: Debugger: Working with call stack

Callstack is used to trace the flow of execution.

For example,

HelloWorld.html
<!DOCTYPE html>
<html>

<body>

    <script>
        function a() {
            var x = 10;
            document.write("Value of x is " + x + "<br />");
        }

        function b() {
            var y = 11;
            document.write("Value of y is " + y + "<br />");
            a();
        }

        function c() {
            var z = 12;
            document.write("Value of z is " + z + "<br />");
            b();
        }

        c();
    </script>

</body>

</html>

Open HelloWorld.html in chrome browser.

Turn on the debugger.

Add debug points on the lines 8, 13, 19 and 23.

Reload the page and control pauses at line 23.

Resume the execution by clicking on Resume button.
As you see the call stack, it is clearly telling the control is at line 19. You can observe local variable z is set to the value 12.

Click on the Resume button again.

As you see the Call Stack, control goes from function c to b and control is at line number 13.

As you see Local Scope section, variable y is set to 11.

Click on Resume button again.

As you see Call Stack section, control goes from function C to function b and from function b to function a. Control is at line number 8 now.

As you see local scope section, variable x is assigned with value 10.

While debugging real time applications, call stack helps developers a lot in identifying the issues.

Previous                                                 Next                                                 Home

No comments:

Post a Comment