Debugging TypeScript 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 TypeScript.
This page details the debugger in MyEclipse.
Note: You can also use the CodeMix plugin for creating and debugging apps using TypeScript. CodeMix is compatible with MyEclipse 2017 and higher and works with existing Professional or higher licenses. Refer to Debugging in CodeMix for more information.
Setting up the TypeScript Debugger
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. See JavaScript Debugging with Source Maps 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.
Starting the Debugger
If your TypeScript is part of a Java EE application, see Debugging Generic Web Applications.
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 displays asking for the URL where your application is accessible. Enter the details and click Finish to start the debug session.
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.
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 application’s index file and select Debug As>Debug Configurations. Select the index file 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.
Debug Configurations for TypeScript.
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 CodeLive to speed up your web development.