Developer Tools in Internet Explorer 8 Beta 2 (Cont.)

Debug JavaScript

While CSS makes it easier to build dynamic sites without JavaScript, most complex sites still need at least some script. And as with any programming language, a good debugger is critical to being productive and the Developer Tools (Figure 3) provide just that.

Simple to Begin Debugging

Debugging JavaScript in Internet Explorer 8 Beta 2 is simple. On any site you want to debug, open the Script tab and click Start Debugging. That’s all there is to it; there is no need to launch a separate application or attach to a process. In previous versions of Internet Explorer, you had to enable script debugging for all of Internet Explorer by changing a setting in the Internet Options Control Panel. However, enabling script debugging reduces browser performance and generates debugging dialogs on any site with a script error, which is frustrating when not debugging. In Internet Explorer 8 Beta 2, Developer Tools includes on-the-fly script debugging, so you can avoid these problems by leaving script debugging disabled and letting the Developer Tools enable debugging for only the current Internet Explorer process. Any new Internet Explorer window will not have debugging enabled until you start debugging in it.

Once started, you have all the functionality you expect from a debugger.

Execution Control

You can pause execution at a specified place by setting a breakpoint. Click a line number or right-click the source and choose Insert Breakpoint. You can set breakpoints within inline functions or event handlers and use conditional breakpoints.

If you’re not sure where to set a breakpoint, click Break All to pause execution before the next JavaScript statement runs or Break On Error to pause execution when Internet Explorer encounters a script error. After pausing execution, step through script, including anonymous functions, with Step Into, Step Over, and Step Out.

Variable Inspection

As you step through code, it’s helpful to inspect the current state of variables. Within the Script tab, use the Locals pane to view local variables and the Watches pane to monitor a custom list of variables. You can add variables to this list by right clicking it in the source and clicking Add Watch or typing the variable name in the Watches pane.

Navigating Call Stack

As you debug your application by stepping through the JavaScript code, you can view the functions in the current call stack. Clicking on a function in the call stack window displays the source code in the source view window.

JavaScript Console

As with HTML and CSS, the Developer Tools not only give you the information needed to debug your site, but they also make it easy to use that data. Instead of editing your source to test a statement, type the JavaScript in the Console pane to execute it. Click Multi Line Mode to enter large amounts of script. Internet Explorer executes the code immediately so you can test the outcome of adding that code at the same location as the current break. You can use Console even when you are not debugging. To make it easy for you to fix errors on your page, Console also logs all the script errors.

Eliminate “Alert Debugging” with Console

The Developer Tools offer a powerful feature to help you debug: console.log. Instead of using window.alert and generating countless dialogs, call console.log to output strings to the Console pane. Add variables to the output and use console.info, console.warn, and console.error to vary the formatting of entries in the Console window. Since the Developer Tools Console functionality is similar to that available in Firebug, a Web developer tool for Firefox, debugging notifications will work across browsers without any changes to your script.

Profile JavaScript

Debugging JavaScript helps perfect the behavior of your site, but the JavaScript profiler can help take your site to the next level by improving its performance. The profiler gives you data on the amount of time spent in each of your site’s JavaScript methods and even built-in JavaScript functions like string concatenation. Since you can start and stop the JavaScript profiler at any time during application execution, you can collect profile data for the specific scenario that interests you. Figure 4 shows a screenshot of the profiler.

Starting a Profiling Session

As with the debugger, getting started is simple: open the Profiler tab and click Start Profiling to begin a session. Perform the scenario you want to profile and then click Stop Profiling to view the data.

Viewing Data

By default, the data appears in a function view which lists all the functions used. Click the Current View dropdown menu and select Call Tree to view a tree representing the order of calls made so you can walk through the code path and find hot spots.

In both views, you can add, remove, arrange, and sort the columns to find the information you’re looking for:

• Right-click a column header and select Add / Remove Columns to customize the view to include exactly the data you’re interested in.
• Right-click and select Sort By or simply click a column header to sort the data by that field.
• Drag and drop columns to rearrange them.

The profile report gives you information on the URL and line number of the function to help you locate the code in your application. Click on the function name to bring up the source code for the function in the source view window of the Script tab.

Running Multiple Sessions and Exporting Data

Click Start Profiling again to begin a new profiling session. When you click Stop Profiling, the new data displays. To view the data from previous profiled sessions, click the file dropdown and choose another report. The profile report persists for the current Internet Explorer process, but you can save the profile data in CSV format by clicking Export and use any other application for later investigation.

Test in Different Browser Modes

Internet Explorer 8 Beta 2 has the ability to render pages and report version information as Internet Explorer 7. Web developers and end users can use this ability to ensure sites continue to work even if not built for Internet Explorer 8 Beta 2, but you can also use it to test how your site will look to Internet Explorer 7 users.

Browser Mode

The Browser Mode menu lets you choose how Internet Explorer should report three important properties:

• User agent string: The value Internet Explorer sends to Web servers to identify itself.
• Version vector: The value used when evaluating conditional comments.
• Document mode: The value used to determine whether Internet Explorer uses the most recent behavior for CSS, DOM, and JavaScript operations or emulates a previous version of Internet Explorer for compatibility.

Three Browser Mode options exist, each modifying these values in different ways:

• Internet Explorer 7: In this mode, Internet Explorer reports a user agent, version vector, and document mode identical to those used by Internet Explorer 7. Use this mode to test how Internet Explorer 7 users experience your site.
• Internet Explorer 8: In this mode, Internet Explorer reports a user agent, version vector, and document mode to match default Internet Explorer 8 Beta 2 behavior which is the most standards-compliant available in Internet Explorer 8 Beta 2. Use this mode if you want to test how Internet Explorer 8 Beta 2 users experience your site.
• IE8 Compatibility View: In this mode, Internet Explorer reports a user agent string indicating Internet Explorer 7, but an additional token appended to the string serves as an indication to web servers that the browser is Internet Explorer 8 Beta 2-capable. The version vector and document mode handling are identical to those used by Internet Explorer 7. Use this mode to test how Internet Explorer 8 Beta 2 users experience your site if they’ve chosen the Compatibility View option.

Document Mode

The Document Mode defines how Internet Explorer renders your page but has no effect on the version vector or user agent string. By using this option in conjunction with the browser mode, you can quickly test which document mode you should use for your site. Three options exist:

• Quirks: This behavior matches that of Internet Explorer when rendering a document with no doctype or a quirks doctype. It’s similar to the behavior of Internet Explorer 5 and the quirks mode behavior of Internet Explorer 6, and the same as the quirks mode of Internet Explorer 7.
• Internet Explorer 7 Standards Mode: This behavior matches that of Internet Explorer 7 rendering a document with a strict or unknown doctype.
• Internet Explorer 8 Standards Mode: This behavior is the latest standards-compliant available in Internet Explorer 8 Beta 2 and is the mode used by default in Internet Explorer 8 Beta 2 when rendering a document with a strict or unknown doctype.

There’s More!

The Internet Explorer 8 Developer Tools include many other features to help you develop sites in Internet Explorer. Some let you view important information like element class name or image size on the page, while others help with common tasks like matching a color on the screen or measuring a distance. Experiment with the tools yourself to learn more about these and others. Visit the Internet Explorer Developer Center at http://msdn.microsoft.com/ie for complete documentation. And don’t forget to follow the Internet Explorer Blog at http://blogs.msdn.com/ie to keep up to date on the latest news from the Internet Explorer team!

John Hrvatin

Attention Keyboard Users!

The Internet Explorer 8 Developer Tools have extensive keyboard support to make it even easier to accomplish tasks. Use standard Windows conventions like F2 to edit and F6 to navigate tab groups, and check out the Internet Explorer 8 Developer Tools Quick Reference at http://go.microsoft.com/fwlink/?LinkID=123648 for a full list of keyboard shortcuts.

Find the Performance Hot Spots

Use the Call Tree view in the Internet Explorer 8 Developer Tools Profiler to quickly find the performance hot spot in your application. Open your profile report in the Call Tree view and sort on the Inclusive Time column. Continue expanding the node which takes the highest inclusive time until you find your performance hot spot.

More Information

For more information about the Internet Explorer Developer Tools, check out these resources:

Internet Explorer Developer Center: http://msdn.microsoft.com/ie

Internet Explorer Team Blog: http://blogs.msdn.com/ie/

JScript Team Blog: http://blogs.msdn.com/jscript/