Java Reference
In-Depth Information
One of the primary differences in IE8's debugger is it must be in debugging mode if you want to debug.
This may seem obvious, but if you recall, Firebug didn't have a debugging mode.
As you can see in Figure 4-18, the debugger is made up of two panels. The left displays the source code
of the fi le that contains the error. If multiple fi les contain JavaScript, you can select those fi les by using
the pull-down menu next to the Stop Debugging button.
The right panel contains fi ve tabs:
❑
Console
: Consists of an upper and lower panel. The lower panel allows you to enter and run
JavaScript code. It has a single-line mode and a multi-line mode for larger blocks of code. The
upper panel is a log of commands you entered along with their results.
Breakpoints
❑
: Lists all breakpoints that you've created for the code in the current page.
❑
Locals
: Lists the variables and their values in scope of the breakpoint.
Watches
❑
: Lists the variables and their values you specify to watch at the breakpoint.
❑
Call Stack
: Displays the call stack.
Another difference in IE8's Developer Tools is the additional Locals tab. Microsoft took Firebug's Watch
tab and broke it into the Locals and Watches tabs.
The source code in the left panel is read-only, so changing it requires editing the fi le in your text editor.
Do so, and change the offending documents in line 16 to document. Save it and try to reload the web
page. Notice you cannot do so. This is because the debugger is currently running and stopped at an
error. In order to reload the page, you must click the Stop Debugging button. With the debugger now
stopped, you can reload the page.
Having corrected the mistake and reloaded the page, you should see the times table in your web page.
Setting Breakpoints
Creating a breakpoint in IE8 is as simple and straightforward as it is in Firebug; simply click in the gut-
ter on the line you want the debugger to break at. After creating a breakpoint, you'll notice a red circle
next to the line number.
Upon creating a breakpoint, an entry is added in the list of breakpoints found by clicking the
Breakpoints tab. Each entry consists of a checkbox to enable/disable the breakpoint, the fi le name of
the source fi le, and the line number the breakpoint is on. Figure 4-19 shows a breakpoint on line 17 of
debug_timestable2.htm.
