The "Break On Next" button gives you the possiblity to stop the script at the next executed command. This can be a user action, a timeout or anything else that causes script execution. As soon as you click on the button, it is armed. When any script execution occurs now, the debugger will halt the script and you can step through it.

+

The ''Break On Next'' button gives you the possiblity to stop the script at the next executed command. This can be a user action, a timeout or anything else that causes script execution. As soon as you click on the button, it is armed. When any script execution occurs now, the debugger will halt the script and you can step through it.

+

+

There are several other [[Break On ...]] features available at the other panels.

| Step Into || [[Image:stepIntoButton.png|center]] || F11 || Jumps into the body of executed functions, so you can debug them

+

| Step Into || [[Image:stepIntoButton.png|center]] || <code class="key">F11</code> || Jumps into the body of executed functions, so you can debug them

|-

|-

-

| Step over || [[Image:stepOverButton.png|center]] || F10 || Executes functions, but doesn't jump into them, instead moves to the next line of the same scope

+

| Step over || [[Image:stepOverButton.png|center]] || <code class="key">F10</code> || Executes functions, but doesn't jump into them, instead moves to the next line of the same scope

|-

|-

-

| Step out || [[Image:stepOutButton.png|center]] || Shift + F11 || Executes the rest of the current function and jumps back to it's caller

+

| Step out || [[Image:stepOutButton.png|center]] || <code class="key">Shift+F11</code> || Executes the rest of the current function and jumps back to it's caller

|}

|}

Line 109:

Line 111:

== See also ==

== See also ==

-

[[Jsd]] (JavaScript interface for debugging Javascript)

+

* [[Script Debugging]]

+

* [[Jsd]] (JavaScript interface for debugging Javascript)

Revision as of 08:02, 31 May 2012

Script Panel

The main purpose of the script panel is to debug JavaScript code. Therefore the script panel integrates a powerful debugging tool based on features like different kinds of breakpoints, step-by-step execution of scripts, a display for the variable stack, watch expressions and more.

Panel Toolbar

Break On Next

The Break On Next button gives you the possiblity to stop the script at the next executed command. This can be a user action, a timeout or anything else that causes script execution. As soon as you click on the button, it is armed. When any script execution occurs now, the debugger will halt the script and you can step through it.

There are several other Break On ... features available at the other panels.

Script Type Menu

The Script Type Menu filters the Script Location Menu by different types of scripts. Thereby three different kinds of scripts are distinguished:

Type

Description

static

All scripts, that are loaded together with the page (via the <script> tag)

eval()

Scripts, that are executed using the eval() function (typically scripts loaded via an XMLHttpRequest)

event

Scripts, that are generated through an event (like e. g. client side table sorting)

You have the option to just show static scripts, static + eval scripts, static + event script or all types of scripts.

Script Location Menu

All scripts filtered by the type(s) selected in the Script Type Menu will be shown inside this menu. Any characters you type on the keyboard while the list of files is open will filter the list to make it easier to find files. By selecting one of the scripts it will be shown inside the Main Panel.

If you right-click on the file list, you'll get options for opening the script in a separate browser tab, copying its location to the clipboard, or opening it inside the DOM Panel.

Execution Control Buttons

The execution buttons are enabled as soon as the debugger is stopped. There are four buttons, which can be used for debugging:

Conditions

For manually set breakpoints you also have the possibility to set conditions, at which they trigger. These conditions can be very complex, but most of the time you'll want to limit breaking to specific variable values.
An example for this could be having a counter and you want to stop execution when the counter reaches a specific value. Another situation would be to stop execution when a specific variable is defined resp. undefined.

Automatic Breakpoints

Furthermore the script execution can be stopped via the different implemented Break On ... features of each panel, which doesn't require explicitly setting of breakpoints.

Variable Tooltips

When the debugger halted the script, you are able to get information about the script variables by hovering them. A popup will appear showing the current value of the hovered variable.

Side Panels

The Side Panels of the Script Panel offer different useful information and functionality about the executed scripts.

Watch

The Watch Side Panel offers the possibility to enter watch expressions allowing to follow changes of variable values while debugging.

Stack

The Stack Side Panel contains information about the call stack trace for the currently debugged function.

Breakpoints

The Breakpoints Side Panel lists the defined breakpoints and gives the possibility to toggle their activation plus additional options for changing the behavior of the breakpoints.

Search

The text input box in the upper right corner searches the source code. When you click in to the box, an auxiliary panel allows you to pick search direction, single or multiple files, and case sensitivity. The text has special case code to support:

Go to Line: The symbol # followed by a number will incrementally move the line number,

Case by Case: If the case sensitivity setting is not used, then an all lower case word will mean case-insensitive search, but a mixedCase word will cause case sensitive matches.