5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 1 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

JavaScriptDebuggerTechnologyPreviewUserGuide

NetBeans JavaScript Debugger Technology Preview UserGuide

Requirements

NetBeans IDE 6.1 FCSOS Same NetBeans 6.1 FCSHardware Platforms Same NetBeans 6.1 FCSFirefox Firefox 2.0.0.xFirebug Firebug 1.1beta12 (This will be installed if you do not have it)

InstallationThe JavaScript Debugger module will be available on NetBeans Beta update center.

Table of Contents

NetBeans JavaScript Debugger Technology Preview User GuideRequirementsInstallationNetBeans Web project

Configuring client side debuggingHtml and JavasSript files

Debugger WindowsBreakpointsdebugger keyword supportStarting DebuggingSessions windowDebugger ActionsSources windowThreads windowCall Stack windowLocal Variables windowWatches WindowHTML and JavaScript editor

URL DebuggingDebug URL actionSources windowHTML and JavaScript editor

JavaScript debugger options (Tools:Miscellaneous:JavaScript Debugger)Known Issues

»

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 2 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

You will see one JavaScript Debugger module listed there.

This is a kit module and hides two other modules. All in all three modules are installed.

JavaScript Debugger (code name base: web.client.javascript.debugger.kit) goes innetbeans/enterprise5/modules/org-netbeans-modules-web-client-javascript-debugger-kit.jarJavaScript Debugger Ant (code name base: web.client.javascript.debugger.ant) goes innetbeans/enterprise5/modules/org-netbeans-modules-web-client-javascript-debugger-ant.jarJavaScript Debugger API (code name base: web.client.javascript.debugger.api) goes innetbeans/gsf1/modules/org-netbeans-modules-web-client-javascript-debugger-api.jar

Install the module:

Accept the license:

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 3 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

Unsigned Module warning:

Once you install the modules, you will be asked to restart the IDE. Restart the IDE:

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 4 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

Verify the installed module:

You can check if the installation worked by checking the files in respective locations. Also, theJavaScript Debugger module should appear in Plugin Manager Installed Plugins tab.

On Mac OS there is a known issue related to installation and the JavaScript Debugger moduledoes not appear in Plug-in Manager. You have to delete (for example) the${HOME}/.netbeans/6.1RC2/var/cache/all-modules.dat file and then restart the IDE to workaround this issue.

NetBeans Web projectConfiguring client side debugging

The client side debugging can be enabled by selecting the Debug Web Applications (Client

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 5 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

side - Firefox browser only) in the Debug category panel of the NetBeans Web Projectproperties dialog.

Html and JavasSript filesYou can create .html and .js files in the project. You can configure the project to run the .htmlfile when the Run Project or Debug Project action is invoked by specifying it in the RelativeURL field of Run category in the NetBeans Web Project properties dialog.

Debugger Windows

The debugger shows the relevant windows when the debugging sessions starts. You can alsoshow the debugger windows using the Window:Debugging sub menu.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 6 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

Breakpoints

You can set the breakpoints in .html and .js files.

You can enable/disable and customize breakpoints using the pop up menu on the breakpointin the left side editor gutter and also in the Breakpoints window.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 7 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

To show the Breakpoints window use Window:Debugging:Breakpoints action.

You can customize the breakpoint using the following dialog:

The customization allows you to set a hit count, hit count filter (only >= filter is supported fornow) and/or condition expression. When a condition expression is specified, the breakpointstops only if the condition expression evaluates to true. You can use !(condition) to negate thesense of condition.

When the debugger is running the Resolved location column shows the URL as seen by thebrowser.

NOTE: Only >= filter is supported for Technology Preview. NOTE: The New Breakpoint...action does not apply to JavaScript. The action is added by the Java debugger support.Unfortunately it cannot be disabled. CAUTION: You will be able to set breakpoints in.jsp file in. But these are server side breakpoints.

NOTE: The breakpoints set in the IDE appear in the Firebug with appropriate state.However, for Technology Preview, the changes made to the breakpoints in Firebug arenot reflected back in the IDE. See: Issue 134093

debugger keyword support

You can force the debugger to suspend by inserting the debugger; statement in yourJavaScript code.

NOTE: The JavaScript Editor currently shows a warning for the use of debuggerkeyword in user source code.

Starting Debugging

Project

You can use the Run:Debug Main Project action to debug the project.

Start Debugging a file

You can debug an individual.html file using the Debug File action in the file's popup menu.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 8 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

The debugger checks if the Firebug 1.1beta+ and NetBeans Firefox Extension have beeninstalled in Firefox. If not found a message dialog is shown:

and an automatic installation of the extensions is started. Follow the instructions to install theextensions. This will happen once after you install the modules.

You may see one or both of the following dialogs depending on whether or not you alreadyhad Firebug 1.1beta or later installed or not.

TROUBLESHOOTING TIP: Make sure that your browser cache is not set to zero so thatthe installation of extesions works correctly. TROUBLESHOOTING TIP: If for somereason you notice that only one of the two extensions got installed, invoke the debugeragain and it will detect and install the other extension.

Install the extensions and restart the Firefox:

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 9 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

After the extensions install and the Firefox Browser restarts, click Ok in the message dialog.The debugging session will be launched.

NetBeans Firefox Extension Status bar icon:

NetBeans Firefox Extension About dialog:

Sessions window

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 10 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

Once the session starts the Sessions window shows debugging session. You can terminatethe session using the actions in popup menu of the session. You can also use the Run:FinishDebugging Sesssion action in the Run menu or Debugging toolbar.

To show the Sessions window use Window:Debugging:Sessions action.

Debugger Actions

The toolbar when the debugger is suspended:

The toolbar when the debugger is not suspended:

The debugger actions:

Finish Debugging Session - obviousResume - after a breakpoint (Enabled when the debugger is suspended)Pause - the debugger will suspend at the next execution of JavaScriptStep Over - step over a JavaScript line.Step In - step into a function call in a JavaScript line.Step Out - step out of the current function callRun to Cursor - is not currently supported

NOTE: You can also invoke these actions from the Firebug's toolbar.

Sources window

Source window shows the loaded scripts/files. For .html and .js files in your project thedebugger will automatically show the file object's path. You can use Go to source to open thescript in an editor. For remote resources the URL path of the file will be shown. This is alsotrue for pages rendered as a result of .jsp file in your project. Got to Source action on suchsources will show the file in read-only editor. The content of the editor is same the content inBrowser's cache.

To show the Sources window use Window:Debugging:Sources action.

CAUTION: Make sure you have not turned off the browser disk cache. Otherwise youwill see an blank editor.

Threads window

In JavaScript each Window or a Frame is an execution context for JavaScript. The Threadswindow basically shows the Window and Frame structure of the page. You can use Go toSource action to open the source in an editor. The comments about remote resources in theSources window above apply here also.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 11 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

Sources window above apply here also.

To show the Threads window use Window:Debugging:Threads action.

Threads window showing a multi framed web page:

Call Stack window

When the debugger is suspended, the Call Stack window shows the call stack. You can usethe Go to Source action to go to the source of the script associated with the Call Stack. Oninitial suspension the top most stack frame is selected automatically. The local variables of theselected Callstack frame are shown in the Local Variables window. The watches are alsoevaluated in the selected Callstack frame. You can double click on the Callstack frame toselect it and explore it's Local Variables and values of watches in that context.

To show the Call Stack window use Window:Debugging:Call Stack action.

The call stack locations are also annotated in the editor windows:

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 12 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

Local Variables window

When the debugger is suspended the Local Variables window show the local variable ofselected Callstack frame. It shows two top nodes:

scope - scope of the function call of the current call stack framethis - the value of this

The scope node is always expanded. Aside from showing local variables and parameters ofthe function call associated with the selected Callstack frame the following additional nodesare shown:

arguments - so that user can see actual arguments - which may be less or more than thedeclared formal parametersarguments.length - so that user can see number of actual arguments passed inarguments.callee.length - so that user can see expected number of arguments as declaredin the function signatureparent scope - information about outer scope

::parent scope - information about outer scope of outer scope and so on.

::parent scope - information about outer scope of outer scope of outer scope and soon.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 13 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

To show the Local Variables window use Window:Debugging:Local Variables action.

As you step through the code the values of some local variables may change. Such localvariables are shown in bold in the Local variables window.

Watches Window

You can add arbitrary JavaScript expressions to the watches window. The debugger willevaluate the watch expression in the selected callstack frame and if successful display thevalue of the expression. You can add and remove the watches using the action in the Watcheswindow popup menu. You can also add watches using the New Watch... action in the editor'spopup menu.

To show the Watches window use Window:Debugging:Watches action.

HTML and JavaScript editor

Data tool tips when the debugger is suspended

When the debugger is suspended you can hover the caret over a JavaScript identifier in theeditor and if the identifier is valid in the selected call stack frame it's value will be displayed in atooltip. You can even select an expression. The value of the expression will be shown in atooltip.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 14 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

tooltip.

URL DebuggingDebug URL action

You can debug and arbitrary URL using the Run:Debug URL ... action. The action shows aprompt dialog. Enter the URL of the application to debug and click on Ok button.

Sources window

While debugging a URL like this the Sources window will show the URL paths of the .html and.js resources.

HTML and JavaScript editor

For remote resources a read-only editor is shown. The Editor tab shows the shortened URLpath. The tooltip on the tab shows the full URL path. You can set the breakpoints in remotescripts using the same mechanism as the file editor.

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 15 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

TROUBLESHOOTING TIP: Make sure that your browser disk and network cache is notset to zero so that the source of the remote URLs can be obtained.

JavaScript debugger options(Tools:Miscellaneous:JavaScript Debugger)You can configure the JavaScript debugger options using theTools:Options:Miscellaneous:JavaScript Debugger tab.

NOTE: Suspend on First line option is currently not working.

Known IssuesJavaScript Debugger Issues

AttachmentsAboutNetBeansFirefoxExtension.png 180623 bytesAdd-ons.png 29239 bytesBreakpointsWindow.png 8584 bytesCallStackAnnotations.png 77901 bytesCallStackWindow.png 5807 bytesCustomizeBreakpoint.png 10485 bytesEnterDebugURL.png 6334 bytesFireBugInstallation.png 26578 bytesInstallFirefoxDebuggerExtensionsBoth.png 9207 bytes

5/11/08 12:26 PMNetBeans Wiki: JavaScriptDebuggerTechnologyPreviewUserGuide

Page 16 of 16http://wiki.netbeans.org/JavaScriptDebuggerTechnologyPreviewUserGuide

InstalledPlugins.png 36602 bytesJavaScriptDebuggerOptions.png 22846 bytesJavaScriptDebuggerPlugin.png 16307 bytesJavaScriptEditor.png 64582 bytesLocalVariablesWindow.png 18353 bytesLocalVariablesWindowNextGeneration.png 22484 bytesNetBeansBetaUpdateCenter.png 8912 bytesNetBeansFirefoxExtension Installation.png 27299 bytesNetBeansFirefoxExtensionStatusBarIcon.png 14397 bytesNetBeansIDEInstaller.png 10202 bytesNetBeansIDEInstallerLicense.png 17329 bytesNetBeansIDEInstallerRestart.png 10908 bytesNetBeansWebProjectPropertiesDebug.png 12618 bytesNetBeansWebProjectPropertiesRun.png 14341 bytesRemoteJavaScriptEditor.png 38929 bytesRemoteSourcesWindow.png 12910 bytesRunningStateToolbar.png 4306 bytesSessionsWindow.png 5241 bytesSourcesWindow.png 4704 bytesSuspendedStateToolbar.png 4566 bytesThreadsWindow.png 4541 bytesThreadsWindowMultiFrame.png 9900 bytesTooltip.png 50518 bytesValidationWarning.png 10025 bytesWatchesWindow.png 5923 bytesWindowDebugging.png 19988 bytes