JavaScriptDebuggerTechnologyPreviewUserGuide

Contents


NetBeans JavaScript Debugger Technology Preview User Guide

Requirements

NetBeans IDE 6.1 FCS
OS Same NetBeans 6.1 FCS
Hardware Platforms Same NetBeans 6.1 FCS
Firefox Firefox 2.0.0.x
Firebug Firebug 1.1beta12 (This will be installed if you do not have it)


Installation

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

Image:NetBeansBetaUpdateCenter_JavaScriptDebuggerTechnologyPreviewUserGuide.png

You will see one JavaScript Debugger module listed there.

Image:JavaScriptDebuggerPlugin_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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 in netbeans/enterprise5/modules/org-netbeans-modules-web-client-javascript-debugger-kit.jar
  • JavaScript Debugger Ant (code name base: web.client.javascript.debugger.ant) goes in netbeans/enterprise5/modules/org-netbeans-modules-web-client-javascript-debugger-ant.jar
  • JavaScript Debugger API (code name base: web.client.javascript.debugger.api) goes in netbeans/gsf1/modules/org-netbeans-modules-web-client-javascript-debugger-api.jar

Install the module:

Image:NetBeansIDEInstaller_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Accept the license:

Image:NetBeansIDEInstallerLicense_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Unsigned Module warning:

Image:ValidationWarning_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

Image:NetBeansIDEInstallerRestart_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Verify the installed module:

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

Image:InstalledPlugins_JavaScriptDebuggerTechnologyPreviewUserGuide.png

On Mac OS there is a known issue related to installation and the JavaScript Debugger module does 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 work around this issue.

NetBeans Web project

Configuring client side debugging

The client side debugging can be enabled by selecting the Debug Web Applications (Client side - Firefox browser only) in the Debug category panel of the NetBeans Web Project properties dialog.

Image:NetBeansWebProjectPropertiesDebug_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Html and JavasSript files

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

Image:NetBeansWebProjectPropertiesRun_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Debugger Windows

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

Image:WindowDebugging_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Breakpoints

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

Image:JavaScriptEditor_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

Image:BreakpointsWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

You can customize the breakpoint using the following dialog:

Image:CustomizeBreakpoint_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

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

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 are not reflected back in the IDE. See: Issue 134093

debugger
keyword support

You can force the debugger to suspend by inserting the
debugger;
statement in your JavaScript code. NOTE: The JavaScript Editor currently shows a warning for the use of
debugger
keyword 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.

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

Image:InstallFirefoxDebuggerExtensionsBoth_JavaScriptDebuggerTechnologyPreviewUserGuide.png

and an automatic installation of the extensions is started. Follow the instructions to install the extensions. 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 already had Firebug 1.1beta or later installed or not.

File:NetBeansFirefoxExtension Installation.png

Image:FireBugInstallation_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

Install the extensions and restart the Firefox:

Image:Add-ons_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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:

Image:NetBeansFirefoxExtensionStatusBarIcon_JavaScriptDebuggerTechnologyPreviewUserGuide.png

NetBeans Firefox Extension About dialog:

Image:AboutNetBeansFirefoxExtension_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Sessions window

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

Image:SessionsWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

Debugger Actions

The toolbar when the debugger is suspended:

Image:SuspendedStateToolbar_JavaScriptDebuggerTechnologyPreviewUserGuide.png

The toolbar when the debugger is not suspended:

Image:RunningStateToolbar_JavaScriptDebuggerTechnologyPreviewUserGuide.png

The debugger actions:

  • Finish Debugging Session - obvious
  • Resume - after a breakpoint (Enabled when the debugger is suspended)
  • Pause - the debugger will suspend at the next execution of JavaScript
  • Step 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 call
  • Run 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 the debugger will automatically show the file object's path. You can use Go to source to open the script in an editor. For remote resources the URL path of the file will be shown. This is also true for pages rendered as a result of .jsp file in your project. Got to Source action on such sources will show the file in read-only editor. The content of the editor is same the content in Browser's cache.

Image:SourcesWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

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

Threads window

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

Image:ThreadsWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

Threads window showing a multi framed web page:

Image:ThreadsWindowMultiFrame_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Call Stack window

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

Image:CallStackWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

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

Image:CallStackAnnotations_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Local Variables window

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

  • scope - scope of the function call of the current call stack frame
  • this - the value of this

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

  • arguments - so that user can see actual arguments - which may be less or more than the declared formal parameters
  • arguments.length - so that user can see number of actual arguments passed in
  • arguments.callee.length - so that user can see expected number of arguments as declared in the function signature
  • parent 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 so on.

Image:LocalVariablesWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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 local variables are shown in bold in the Local variables window.

Image:LocalVariablesWindowNextGeneration_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Watches Window

You can add arbitrary JavaScript expressions to the watches window. The debugger will evaluate the watch expression in the selected callstack frame and if successful display the value of the expression. You can add and remove the watches using the action in the Watches window popup menu. You can also add watches using the New Watch... action in the editor's popup menu.

Image:WatchesWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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 the editor and if the identifier is valid in the selected call stack frame it's value will be displayed in a tooltip. You can even select an expression. The value of the expression will be shown in a tooltip.

Image:Tooltip_JavaScriptDebuggerTechnologyPreviewUserGuide.png

URL Debugging

Debug URL action

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

Image:EnterDebugURL_JavaScriptDebuggerTechnologyPreviewUserGuide.png

Sources window

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

Image:RemoteSourcesWindow_JavaScriptDebuggerTechnologyPreviewUserGuide.png

HTML and JavaScript editor

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

Image:RemoteJavaScriptEditor_JavaScriptDebuggerTechnologyPreviewUserGuide.png

TROUBLESHOOTING TIP: Make sure that your browser disk and network cache is not set 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 the Tools:Options:Miscellaneous:JavaScript Debugger tab.

Image:JavaScriptDebuggerOptions_JavaScriptDebuggerTechnologyPreviewUserGuide.png

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

Known Issues

JavaScript Debugger Issues

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo