facebook
  1. Genuitec Learning Center
    2.  > 
  2. Debugger

Debugging Generic Web Applications in MyEclipse

Many developers spend half of their time fixing bugs. A powerful debugger is critical to produce a quality web application in a timely manner. That is why our debugger is so valuable, making it easy to debug your JavaScript, (X)HTML and JSP files.

Download

Note: If you are using CodeMix refer to Debugging in CodeMix.

Starting the Debugger

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

Use any of the following methods to start the debugger:

  • 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 the Debug button  dddebugbutton  (select JavaScript in JavaEE Web Application and click OK if the project is not deployed).
  • 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 the Debug button dddebugbutton.
  • Debug Configurations—Select Debug Configurations from the Run menu. Select your project from the JavaScript in Web Application folder and click Debug.

Using the Debug Perspective

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. The Debug perspective includes the views you need to effectively debug your code.

debugperspectiveco2
Debug Perspective

Editing 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 and select Debug As>Debug Configurations. Your project displays in the JavaScript in Web Application folder. You can edit an existing configuration or right-click on the folder and select New to create a new configuration.

cfdebugconfig

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.

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

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.