Java Reference
In-Depth Information
Now Step Into twice, and you'll be taken inside the
firstCall()
function. Once again, examine the Call Stack pane, and you'll see
something similar to Figure 18-14.
You can click each entry in the Call Stack pane to examine
where the JavaScript engine is currently executing in each of the
functions. If you click the
buttonClick
entry, the developer tools
highlight line 25, the line inside of
buttonClick()
that is currently executing.
figure 18-14
Now step into
secondCall()
, and another entry is added to the call stack. One more step takes you
into
thirdCall()
, again with its name being added to the top of the call stack.
Step Into again, and as you leave the
thirdCall()
you will see that its corresponding entry is removed from
the top of the call stack. Yet another step takes you out of
secondCall()
. Each additional step takes you
out of a function and removes its name from the call stack, until eventually all the code has been executed.
This demo page was very simple to follow, but with complex pages, the call stack can prove very
useful for tracking where you are, where you have been, and how you got there.
As mentioned earlier, most other developer tools for other browsers are similar to Chrome's
developer tools in functionality, but as you'll soon see with IE11, the tools can look a bit different.
debugging in internet explorer
Before version 8, developers had to download and install the Microsoft Script Debugger for any type
of script debugging. Thankfully, Microsoft built a debugger into IE8, and every subsequent version
includes a suite of tools to ease our lives.
You can access the debugger in a couple of ways, the easiest being to press the F12 key. However, you
can also bring up the development tools by clicking the “gear” menu and choosing the F12 Developer
Tools option.
By default, the F12 Developer Tools opens as a panel within the browser window (Figure 18-15), but
as with Chrome's tools, you can pop it out with the icon next to the Close button.
As you can tell from Figure 18-15, IE's tools are laid out much differently than Chrome's. On the
left‐hand side, you see a list of icons. The two we are concerned with are the second and third icons:
the console (Figure 18-16) and debugger (Figure 18-17), respectively.
As you can see in Figure 18-17, the debugger is made up of two panels. The left displays the source
code of the file, and it uses a tabbed interface to display the source of multiple files. If multiple files
contain JavaScript, you can open them in a new tab using the file selection button.
The right panel contains two subpanel tabs:
➤
Watches:
Lists the variables/expressions and their values you specify to watch at the
breakpoint. This also displays the variables in scope.
➤
Breakpoints/Call Stack:
Lists all breakpoints that you've created for the code in the current
page. You can click “Call Stack” to display the call stack.
Now load
ch18 _ example4.html
, and you'll see the times table in your web page.
