Java Reference
In-Depth Information
The console isn't limited to single lines of JavaScript. Click the up arrow on the right side of the screen
and you can enter multiple statements to execute.
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 that demonstrates the call stack very nicely.
1.
Enter this code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Debugging: Callstack</title>
<script type=”text/javascript”>
function firstCall()
{
secondCall();
}
function secondCall()
{
thirdCall();
}
function thirdCall()
{
//
}
function button1_onclick()
{
debugger
firstCall();
}
</script>
</head>
<body>
<input type=”button” value=”Button” name=”button1”
onclick=”return button1_onclick()“ />
</body>
</html>
2.
Save this page as
debug_callstack.htm
, and load it into Firefox. All you'll see is a blank web
page with a button.
3.
Click the button and the debugger will open at the debugger statement in the button1_
onclick() function, which is connected to the button's onclick event handler.
4.
Click the Call Stack tab in the right panel. Your debugger now looks like what is shown in
Figure 4-13.
