Java Reference
In-Depth Information
figure 18-3
You can pop it out to its own window by clicking the icon next to the Close button.
Open
ch18 _ example3.html
(either from your computer or the web) in Chrome and open Chrome's
developer tools.
The JavaScript debugger is contained in the Sources tab, and it is made up of three panels (Figure 18-4).
The left panel contains the list of sources to choose from. You'll only see one source available in this
chapter because there is only one file loaded by the browser. But if you load a page with multiple
external JavaScript files, you'll find each of them listed in the left panel.
The center panel contains the source code of the selected file, and it's here that you'll set breakpoints
and step through code. The code displayed in this panel is read‐only; if you want to change it, you
have to edit the file in your text editor and reload the page.
The right panel contains several different subpanels. In this chapter, we focus on Breakpoints, Scope
Variables, Watch Expressions, and Call Stack:
➤
Breakpoints:
Lists all breakpoints that you've created for the code in the current page
➤
Scope Variables:
Lists the variables and their values in scope of the breakpoint
➤
Watch Expressions:
Lists the “watches” that you specify. These are typically variables and/or
expressions that you want to inspect at a breakpoint.
➤
Call Stack:
Displays the call stack
