The Developer Tools feature of Internet Explorer 8 offers a built-in lightweight Microsoft JScript debugger that enables developers to set breakpoints and to step through client-side JScript code without leaving the browser. This document outlines the high-level features of the JScript debugger. To get acquainted with the other features of the Internet Explorer 8 Developer Tools, refer to Discovering the Internet Explorer 8 Developer Tools; to learn about its user interface (UI), refer to Internet Explorer 8 Developer Tools GUI Reference.

• Introduction
• Start Debugging
• Setting Breakpoints
• Controlling Execution
• Inspecting Variables
• Inspecting Call Stack
• Using Console to Execute Code Statements
• Using Console for Logging Alerts and Error Messages
• Related Topics

Introduction

JScript debugging is a critical part of Web development. With the intuitive, lightweight JScript debugger that is aimed at non-professional developers yet powerful enough for a professional developer's tool set, we bring one-click simplicity to the end-to-end JScript debugging experience. After installing Internet Explorer 8, developers can debug JScript on any site loaded in Internet Explorer.

To open Developer Tools, press F12; alternatively, on the Tools command bar, click the Developer Tools button.

Start Debugging

With the Developer Tools in Script mode, begin the debugging process by clicking the Start Debugging button. Next, the Debugging Requires Webpage Refresh dialog box will give you an option to refresh the page. If you click OK, the debugging will start and the page will refresh; if you click Cancel, debugging will not start and the page will not refresh. When debugging starts, if the Developer Tools window is pinned to the Internet Explorer 8 instance, it will unpin itself. When debugging stops, you can Pin it back to the Internet Explorer 8 instance.

Figure 1. The Script Tool user interface

To stop debugging, either click the Stop Debugging button or press SHIFT+F5.

Setting Breakpoints

You can set breakpoints at any time while viewing the sources, and at any point in your script sources and in html sources where scripts are defined. To set a breakpoint at a specific line, click next to the line number. Once the breakpoint is set, the corresponding line of code gets highlighted. You can also set breakpoints by using the shortcut menu or by pressing F9.

A breakpoint pauses script execution immediately before the breakpoint line, and the debugger will highlight the next line to be executed. During debugging, any runtime errors will cause the debugger to break at the location of an error. To change this behavior, either click the Break on Error toggle button or press CTRL+SHIFT+E. Internet Explorer will pause and in the Primary Content pane highlight the line that has caused the error. While waiting for input from the script debugger, the browser will not respond to any user input.

Figure 2. Setting and managing breakpoints

A list of all breakpoints is available in the Breakpoints tab of the debugger. Here, you can find the location of all breakpoints, along with the file name and line number where a break point has been set. To go to the source code location of a breakpoint, double-click the breakpoint in the list. To deactivate the breakpoint without removing it from the source code, clear the check box next to the breakpoint. To remove the breakpoint, right-click it and select Delete from the shortcut menu. Internet Explorer maintains the breakpoint information until you close the Developer Tools, even if you navigate away from the current site.

When a breakpoint is set, execution will stop at the breakpoint every time it is encountered. If you want execution to stop at that breakpoint only when a certain condition is true, set a condition for that breakpoint as follows. Right-click the breakpoint, then click Condition; in the Conditional Breakpoint dialog box, enter the condition and click OK. This will cause the debugging to stop at this breakpoint only when the set condition is true.

Controlling Execution

From a breakpoint, you can control execution by using any of the following commands:

• Continue

  Continue to run the script without pausing, until another breakpoint or script error is hit. Keyboard shortcut: F5.

• Break All

  Pause execution immediately before the next script statement to be executed. Keyboard shortcut: CTRL+SHIFT+B.

• Break On Error

  Pause execution at the point where the error has occurred when the button is pressed; otherwise, execution will not break on error and will continue by throwing the exception. Keyboard shortcut, toggle on/off: CTRL+SHIFT+E.

• Step Into

  Executes the next line of script and pauses, even if the next line is inside a new method. Keyboard shortcut: F11.

• Step Over

  Continues to the next line of script in the current method, and then pauses. Useful for stepping over method calls. Keyboard shortcut: F10.

• Step Out

  Continues executing the script to the next line in the method that has called the current method. Keyboard shortcut: SHIFT+F11.

Inspecting Variables

You can inspect the script's variables whenever execution is paused at a breakpoint. The Locals tab of the debugger displays the name, value, and type of all the variables available in the current execution scope. If a variable is out of scope, it is unavailable.

You can watch variables from different scopes by adding them to the Watch tab. To set a watch variable, select the source text, then right-click, and then on the shortcut menu click Add Watch. This will add a watch for the word on which the cursor was set. A watch variable can also be set as follows: in the Watch window, click Click to add, and then type the name of a variable you want to watch.

Figure 3. Inspecting variables in the Watch window.

With each execution of a script line, the debugger will update the variable values in the Watch and Locals tabs, indicating changes with red text. To modify the value of a variable while the debugger is stopped at a breakpoint, click the value in the watch list, type a new value, and press ENTER.

Inspecting Call Stack

The Callstack tab provides a current list of execution contexts whenever the debugger pauses execution at a breakpoint. To move through the stack, double-click and inspect the variables at that execution context in the Locals tab.

Using Console to Execute Code Statements

The Console tab of the debugger provides a console for executing script statements on the fly. Type any valid statement or variable name, and press ENTER (or click Run Script) to execute that statement in the context of the current page.

To set the values of variables, use the standard assignment syntax:

s = 'my query string' 

Clicking the Multi Line Mode button expands the input window to allow entry of multiple lines. It also changes the behavior of the ENTER key, such that the key creates a new line instead of executing the script. Here, you can type multiple lines of code and then execute them by clicking Run Script. The input window, which is resizable, offers additional controls through the shortcut menu.

You can use the Console tab at any time, even if debugging is disabled. When execution stops at a breakpoint, the commands entered in this tab will run in the execution scope of the breakpoint; when execution is not paused, the commands will run in the global scope.

Using Console for Logging Alerts and Error Messages

All the script errors in a particular instance of Internet Explorer are logged to the Console once the Developer Tools have been started. To navigate to the error location, click on the source information provided in the error.

You can also log messages to the Console by using console.log APIs. Instead of using window.alert and generating countless dialogs, call console.log to output strings to the Console tab. To differentiate between messages, use different console.log APIs; for example:

• console.log
• console.info
• console.warn
• console.error
• console.assert

These console commands can be called with a list of arguments that will be concatenated to generate the output string. The input parameters can also be formatted by using substitution patterns in the style of printf. For example, you can call console.log using one of the following two ways:

• console.log("Variable x = ", x, " and variable y = ", y)
• console.log("Variable x = %d and variable y = %d", x, y)

Related Topics

• Discovering the Internet Explorer 8 Developer Tools
• Internet Explorer 8 Developer Tools GUI Reference
• Developer Tools: Script Profiler Overview
• Developer Tools: Keyboard Shortcuts