Java Reference
In-Depth Information
Call Stack Window
When you are single‐stepping through the code, the call stack window keeps a running list of which
functions have been called to get to the current point of execution in the code.
Let's create an example web page to demonstrate the call stack. Open your text editor and type the
following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 18: Example 5</title>
</head>
<body>
<input type="button" value="Button" name="button1" id="button1" />
<script>
function firstCall() {
secondCall();
}
function secondCall() {
thirdCall();
}
function thirdCall() {
//
}
function buttonClick() {
debugger;
firstCall();
}
document.getElementById("button1")
.addEventListener("click", buttonClick);
</script>
</body>
</html>
Save this file as ch18 _ example5.html and open it in
Chrome. You'll see a page with a simple button. With the
development tools open, click the button and examine
the Call Stack pane. You should see something like
Figure 18-13.
figure 18-13  
Chrome adds the function to the top of the call stack for every function call. It displays
the name of the function, the file the function resides in, and the line number of the
currently executing statement within the function. You can already see that the first
function called was buttonClick() , it is inside ch18 _ example5.html , and the execution is
at line 24.
 
Search WWH ::




Custom Search