Script Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Added description of Options Mini Menu)
m (Added categories)
(34 intermediate revisions not shown)
Line 2: Line 2:
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.
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.
-
== Options Mini Menu ==
+
== Options Menu ==
-
{| class="wikitable" style="vertical-align:top;"
+
This menu is reachable via the little arrow in the panel tab ( [[Image:ScriptPanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug 1.9 Release Notes|Firebug 1.9]]).
 +
 
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
-
! style="width:180px" | Option || Description
+
! style="width:180px;" | Option || Preference || Description
-
|-
+
-
| Enabled || Enables the Script Panel
+
|-  
|-  
-
| Disabled || Disables the Script Panel
+
| Enabled/Disabled || <code>extensions.firebug.script.enableSites</code> || Enables the Script Panel
|-  
|-  
-
| Decompile for eval() source || Toggles the decompilation of through eval() created JavaScript code
+
| Show chrome sources || <code>extensions.firebug.service.showAllSourceFiles</code> || Toggles the display of program and add-on internal sources.
 +
Note that Firebug will still not activate for chrome URLs unless you also set <code>service.filterSystemURLs</code> to false (see [[Firebug Preferences]]).
|-  
|-  
-
| Show chrome sources || Toggles the display of program and add-on internal sources
+
| Track Throw/Catch || <code>extensions.firebug.service.trackThrowCatch</code> || Toggles tracking of throw/catch blocks
|-  
|-  
-
| Track Throw/Catch || Toggles tracking of throw/catch blocks
+
| Show Break Notifications || <code>extensions.firebug.showBreakNotification</code> || Toggles the display of break notifications
|}
|}
 +
 +
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
== Panel Toolbar ==
== Panel Toolbar ==
=== Break On Next ===
=== 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.
+
The ''Break On Next'' button ( [[File:Break_On_Next_Button.png]] ) 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 ===
=== Script Type Menu ===
Line 39: Line 44:
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.  
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 seperate browser tab, copying its location to the clipboard, or opening it inside the [[DOM 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 ===
=== Execution Control Buttons ===
Line 45: Line 50:
{| class="wikitable" style="vertical-align:top;"
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
-
! style="width:60px" | Type || style="width:70px" | Shortcut || Description
+
! style="width:60px" | Type || style="width:50px" | Button || style="width:100px" | Shortcut || Description
|-  
|-  
-
|Continue || F8 || Continues script execution until the next breakpoint or the execution ends
+
| Rerun || [[Image:rerunButton.png|center]] || <code class="key">Shift</code> + <code class="key">F8</code> || Reruns the current call stack (see [http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-re-run-this-stack/ Honza's blog post] for more info)
|-  
|-  
-
|Step Into || F11 || Jumps into the body of executed functions, so you can debug them
+
| Continue || [[Image:continueButton.png|center]] || <code class="key">F8</code> || Continues script execution until the next breakpoint or the execution ends
 +
|-
 +
| 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 || 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 || 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</code> + <code class="key">F11</code> || Executes the rest of the current function and jumps back to it's caller
|}
|}
-
== Breakpoints ==
+
== Script View ==
-
Breakpoints in Firebug are used to debug JavaScript code. They will stop script execution at a specific point and give you control over script execution.
+
The Script View displays the selected JavaScript code. This can be a JavaScript file, JavaScript code embedded inside HTML via <code>&lt;script&gt;</code> or dynamically evaluated code created via <code>eval()</code> or event listeners.
 +
 
 +
It allows to stop the JavaScript execution at specific breakpoints or events and to debug the code by stepping through each executed line.
 +
 
 +
=== Breakpoint Column ===
 +
The Breakpoint Column displays the script's line numbers and allows you to set breakpoints. The numbers of lines containing executable JavaScript code are marked in <span style="color: green;">green</span> to indicate where you can set a breakpoint.
 +
 
 +
==== Setting breakpoints ====
 +
By clicking on it a breakpoint is set for the line. Clicking it again removes the breakpoint again.
 +
 
 +
==== Breakpoint conditions ====
 +
For manually set breakpoints you also have the possibility to set conditions, at which they trigger. Doing so opens the Breakpoint Condition Editor:
 +
 
 +
[[File:ScriptBreakpointConditionEditor.png]]
 +
 
 +
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.
 +
 
 +
=== Break Notifications ===
 +
Break notifications provide information on why the script execution was halted. These notifications are displayed when a special breakpoint was triggered.
-
=== Types ===
 
-
You can set breakpoints to stop script execution as soon as it reaches them for debugging purposes. Currently you can manually create five different types of breakpoints:
 
{| class="wikitable" style="vertical-align:top;"
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
-
! style="width:130px" | Type || style="width:100px" | Panel || Description
+
! Type || Example || Description
|-  
|-  
-
|Script Breakpoints || Script Panel || Standard type of breakpoints
+
| Error Break Notification || [[File:ErrorBreakNotification.png|center]] || Displayed when halted at an error breakpoint
|-  
|-  
-
|Error Breakpoints || [[Console Panel]] || Trigger on a specific JavaScript error
+
| HTML Mutation Break Notification || [[File:HTMLMutationBreakNotification.png|center]] || Displayed when halted at an HTML breakpoint
-
|-
+
|-  
-
|HTML Breakpoints || [[HTML Panel]] || Trigger on HTML manipulation
+
| DOM Property Change Break Notification || [[File:DOMPropertyChangeBreakNotification.png|center]] || Displayed when halted at a DOM breakpoint
|-
|-
-
|DOM Breakpoints || [[DOM Panel]] || Trigger on DOM property manipulation
+
| XHR Break Notification || [[File:XHRBreakNotification.png|center]] || Displayed when halted at an XHR breakpoint
|-
|-
-
|XHR Breakpoints || [[Net Panel]] || Trigger on XMLHttpRequests
+
| Cookie Change Break Notification || [[File:CookieChangeBreakNotification.png|center]] || Displayed when halted at a cookie breakpoint
|}
|}
-
=== Conditions ===
+
Break notifications can be disabled by unchecking the "Show Break Notifications" option inside the [[#Options Menu|options menu]].
-
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 ==
+
=== 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.
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.
Line 90: Line 109:
=== Watch ===
=== Watch ===
-
The Watch Side Panel offers the possibility to enter watch expressions allowing to follow changes of variable values while debugging. To add a variable to the Watch List you can either select it inside the Main Panel and choose "Add Watch" from the context menu or you can enter it into the text field inside the Watch Side Panel. Right-clicking on a variable inside the Watch List opens a context menu with options for copying its name and path as well as options for editing or removing it from the list and refreshing the whole list. When you've added a function to the Watch List opening the context menu additionally offers you the possibility to copy the whole function, opening it inside the [[DOM Panel]] and logging calls to it inside the [[Console Panel]].
+
The [[Watch Side Panel]] offers the possibility to enter watch expressions allowing to follow changes of variable values while debugging.
-
The options menu offers toggling the display of user-defined properties and functions, DOM properties, functions and constants and lets you refresh the list
+
=== Stack ===
=== Stack ===
-
While debugging the Stack Side Panel shows information about the stack trace listing the function stack for the currently debugged function. Right-clicking on one of the entries gives you the possibility to copy the function or jump to it inside the [[DOM Panel]].
+
The [[Stack Side Panel]] contains information about the call stack trace for the currently debugged function.
-
For the stack there's one option inside the option menu to omit the toolbar stack
+
=== Breakpoints ===
=== Breakpoints ===
-
Lists the defined breakpoints and gives the possibility to toggle their activation
+
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.
-
The options of the Breakpoints options menu include removing all defined breakpoints and toggling their activation
+
 
 +
== 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.
== See also ==
== See also ==
-
[[Jsd]] (JavaScript interface for debugging Javascript)
+
* [[Script Debugging]]
 +
* [[Jsd]] (JavaScript interface for debugging Javascript)
 +
 
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:Panels]]

Revision as of 23:48, 21 November 2013

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.

Contents

Options Menu

This menu is reachable via the little arrow in the panel tab ( ScriptPanelOptionsMenuArrow.png ) or by right-clicking on on the panel tab (since Firebug 1.9).

Option Preference Description
Enabled/Disabled extensions.firebug.script.enableSites Enables the Script Panel
Show chrome sources extensions.firebug.service.showAllSourceFiles Toggles the display of program and add-on internal sources.

Note that Firebug will still not activate for chrome URLs unless you also set service.filterSystemURLs to false (see Firebug Preferences).

Track Throw/Catch extensions.firebug.service.trackThrowCatch Toggles tracking of throw/catch blocks
Show Break Notifications extensions.firebug.showBreakNotification Toggles the display of break notifications

For more info about tweaks available in Firebug please see the full list of preferences.

Panel Toolbar

Break On Next

The Break On Next button ( Break On Next Button.png ) 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:

Type Button Shortcut Description
Rerun
RerunButton.png
Shift + F8 Reruns the current call stack (see Honza's blog post for more info)
Continue
ContinueButton.png
F8 Continues script execution until the next breakpoint or the execution ends
Step Into
StepIntoButton.png
F11 Jumps into the body of executed functions, so you can debug them
Step over
StepOverButton.png
F10 Executes functions, but doesn't jump into them, instead moves to the next line of the same scope
Step out
StepOutButton.png
Shift + F11 Executes the rest of the current function and jumps back to it's caller

Script View

The Script View displays the selected JavaScript code. This can be a JavaScript file, JavaScript code embedded inside HTML via <script> or dynamically evaluated code created via eval() or event listeners.

It allows to stop the JavaScript execution at specific breakpoints or events and to debug the code by stepping through each executed line.

Breakpoint Column

The Breakpoint Column displays the script's line numbers and allows you to set breakpoints. The numbers of lines containing executable JavaScript code are marked in green to indicate where you can set a breakpoint.

Setting breakpoints

By clicking on it a breakpoint is set for the line. Clicking it again removes the breakpoint again.

Breakpoint conditions

For manually set breakpoints you also have the possibility to set conditions, at which they trigger. Doing so opens the Breakpoint Condition Editor:

ScriptBreakpointConditionEditor.png

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.

Break Notifications

Break notifications provide information on why the script execution was halted. These notifications are displayed when a special breakpoint was triggered.

Type Example Description
Error Break Notification
ErrorBreakNotification.png
Displayed when halted at an error breakpoint
HTML Mutation Break Notification
HTMLMutationBreakNotification.png
Displayed when halted at an HTML breakpoint
DOM Property Change Break Notification
DOMPropertyChangeBreakNotification.png
Displayed when halted at a DOM breakpoint
XHR Break Notification
XHRBreakNotification.png
Displayed when halted at an XHR breakpoint
Cookie Change Break Notification
CookieChangeBreakNotification.png
Displayed when halted at a cookie breakpoint

Break notifications can be disabled by unchecking the "Show Break Notifications" option inside the options menu.

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.

See also

Personal tools