NetBeans JavaScript Debugger Technology Preview User Guide


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

Note: M1 == Milestone 1

NOTE: When the IDE detects that the user does not have Firebug installed in their Firefox profile, it initiates a download of Firebug from website. The website has been down lately. As a backup alternative a copy of Firebug 1.1beta12 has been uploaded here. (Windows users: please rename the .zip extension to .xpi). You may download and install the Firebug manually using the standard Firefox add-on installation procedure e.g. drag and drop the Firebug's .xpi file onto a Firefox window.


The JavaScript Debugger modules will installed with the NetBeans IDE.

NetBeans Web project Integration

This integration will be available in the NetBeans 6.5 (M1) Web & Java EE download bundle.

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.


NetBeans Ruby on Rails project Integration

This integration will be available in the NetBeans 6.5 (M1) Ruby download bundle.

Configuring client side debugging

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


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.



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


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.


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 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

keyword support

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


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


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:


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

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.


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 - 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.


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.


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 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.


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

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


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.


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.


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.


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.


URL Debugging

Debug URL action

This action will be available in the NetBeans 6.5 (M1) Web & Java EE and Ruby download bundles.

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.


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 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.


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.


NOTE: Suspend on Error option is currently not working.

NOTE: Suspend on Exception 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