DEV Community

Cover image for Inspecting call stack through debugger in browser developer tools?
Lawaanu Borthakur
Lawaanu Borthakur

Posted on • Edited on

Inspecting call stack through debugger in browser developer tools?

As every execution context is put inside a stack which is called as call stack so that it executes in a sequential order. As I have explained theoretically about call stack in my earlier post. Now lets view it practically.
Call Stack 1
Once we run the above Javascript code in our browser, We have to open the developer tools in our browser and first we should add the breakpoints to the code such as line numbers:12,15,17,18

Now once we start debugging , the execution first paused in line number 12.Then we will see (anonymous) in the call stack which is the global execution context.

Call Stack2

Then once we resume the debugger, then execution will pause on line number 17 and after that if we again resume the debugger, then the execution will pause in line number 15.

When the execution pause in line number 15, we will notice that a new execution context i.e getName is created in call stack because of function invocation.

Call Stack 3
Then again when we resume the debugger, execution will pause in line number 18.In this point we will notice that the new execution context getName which was created got deleted i.e it popped out of the stack as the execution got over.

Call Stack 4

Now again if we resume the debugger which was pause in line number 18, we will notice that the global execution context (anonymous) got deleted and the call stack is empty.

Call Stack 5

So, this how call stack keeps track of the execution.

Reference:@akshaymarch7

Top comments (0)