CHAPTER 7 ■ EXPLORING JAVASCRIPT DEBUGGING TOOLS AND TECHNIQUES
Figure 7-12. Context menu items for a file that contains JavaScript
Source Code The Source Code window lists the source code for the currently open file. The file could be an HTML file, XHTML file, or JavaScript file. The Source Code window implements a tabbed theme so multiple files can be open at the same time, with each file residing in its own tab. The code has some simple colorization that improves readability. JavaScript keywords such as function and var have bold formatting, while string literals have a different colored font. On the left side of the window is the line numbering for the file. The far-left side of the Source Code window is the gutter on which debugging breakpoints can be set.
Breakpoints, Part 1 Breakpoints are the feature that really make debuggers useful. They allow you to suspend the execution of code at a point of your choosing, giving you the opportunity to inspect various variables and properties to determine the cause of bugs. Venkman supports two kinds of breakpoints: hard breakpoints and future breakpoints. This is a departure from most debugging environments, so we’ll discuss the difference between the two. A hard breakpoint is the type of breakpoint you’re used to seeing in modern programming languages such as Java. It instructs Venkman to suspend processing at the breakpoint. Execution cannot continue until the user instructs it to do so. In Venkman, a hard breakpoint always exists within the body of a function. A future breakpoint is similar to a hard breakpoint in that it instructs Venkman to suspend execution of the JavaScript at the breakpoint. The difference between the two is that a future breakpoint is set on lines that do not exist within the body of a function. These lines of code are executed as soon as they are loaded by the browser. In contrast, code that resides within the body of a function is not executed until the function is executed in response to some action or event. Figure 7-13 shows an example page loaded with JavaScript code that has two breakpoints. The embedded JavaScript code has both a function that contains code and code that exists outside a function body. The code within the function has a hard breakpoint, and the code outside the function has a future breakpoint.
203
