Webclipse

Starting the JavaScript Debugger

With the Webclipse JavaScript debugger, you can debug generic web applications (javascript, html, xhtml and jsp files), including web fragments, TypeScript, and Node.js applications without leaving Eclipse.

Back to JavaScript Debugger

Download Webclipse

The first time the debugger encounters a breakpoint, you are asked to switch to the Debug perspective. Select Remember my decision to avoid this message in the future, and then click Yes. Eclipse switches to the Debug perspective which includes the views you need to effectively debug your JavaScript code.

Debugperspecitve2

1. Debug a Generic Web Application

To debug a generic web application, you must have Google Chrome installed. When you start the debugger, Google Chrome opens automatically. There are multiple ways to start the debugger.

From the Project Explorer

Right-click on the web project or enterprise application project (EAR) and select Debug As>JavaScript in JavaEE Web Application; or, select the project and click  debugicon2 (select JavaScript in JavaEE Web Application and click OK if the project is not deployed).

From the Server View

After the project has been deployed to the server, right-click on the project in the Servers view and select Launch JavaScript Debug Session; or, select the project and click debugicon2.

From Debug Configurations

Select Debug Configurations from the Run menu. Select your project from the JavaScript in Web Application folder and click Debug.

2. Debug a TypeScript Application

Our TypeScript debugging support allows you to place breakpoints directly in TypeScript files, and step through the original TypeScript source that exists in your workspace—you do not need to place breakpoints in transpiled JavaScript.

To debug TypeScript, you typically need to set up source maps so that we can map the JavaScript code that is running in the browser to the TypeScript source in your workspace. In several cases, like when you are working with a modern framework like Angular 2 with Webpack, source maps are likely to be set up correctly already. Please see this document for more information.

  • On the TypeScript>Build Path property page, ensure “Automatically compile TypeScript files” is checked, or ensure you are transpiling into JavaScript at appropriate times if you are managing this yourself.

  • On the TypeScript>Compiler property page, ensure “Generate corresponding .map files” is checked to ensure source maps are generated.

  • Finally, to place breakpoints, simply open the TypeScript source in our TypeScript editor and place breakpoints like you normally would.

If your TypeScript is part of a Java EE application, follow the instructions in section 1 to start the debug session.

Externally deployed TypeScript Application

If your TypeScript is part of an application that you are launching externally, launch the application like your normally would, and then choose Debug As > JavaScript in Externally Deployed Web Application from the context menu of your application’s index file (typically something like index.html).
A dialog asking you for the URL at which your application is accessible will appear – enter in those details, and click Finish to start the debug session.
If you need to change your debug settings, open the Externally Launched debug configuration to change the settings you desire.

3. Debug a Node.js Application

To debug Node.js applications, you must have Node.js installed. There are multiple ways to start the debugger.

From the Project Explorer

Right-click on the JavaScript file and select Debug as>Standalone Node.js Application; or, select the JavaScript file and click debugicon2.

From Debug Configurations

Select Debug Configurations from the Run menu. Select your project from the Standalone JavaScript Application folder and click Debug.

4. Edit Debug Configurations

The first time you debug your application, the debug configuration is automatically created with the default settings. To view the configuration, select Run>Debug Configurations from the menu; or, right-click the generic project in the Project Explorer or JavaScript file in Node.js applications and select Debug As>Debug Configurations. Your project displays in the appropriate folder: JavaScript in Web Application for web applications or Standalone JavaScript Application for Node.js applications. You can edit an existing configuration or right-click on the folder and select New to create a new configuration.

JSDebugConfiguration

Debug Configurations for the JavaScript Debugger

Tip:  If you do not select a Server, you can debug a web application that is deployed on a remote server.


4.1 Source Map Support

If you are using a tool for transpilation (such as TypeScript or Coffeescript), minification (such as minifyJS or UglifyJS) or bundling (such as Browserify), Source Map Support allows you to easily debug your JavaScript files by allowing the debugger to represent current code execution position in the context of the original file. If you are using source maps, select  Enable source maps support on Debug Configurations. You will also need to properly configure your processing tool.  Learn more


4.2 Hot-Swap JavaScript Code

Select the Hot-swap JavaScript code to browser option to automatically view JavaScript changes directly in the Browser without reloading the page. Use this feature in conjunction with Live Preview to speed up your web development.