PyCharm 2017.1 Help

Debugging TypeScript

This feature is supported in the Professional edition only.

TypeScript code is not processed by browsers that work with JavaScript code. Therefore to be executed, TypeScript code has to be translated into JavaScript. This operation is referred to as compilation and the tools that perform it are called compiler.

In addition to this, compilation also can involve generation of source maps that set correspondence between lines in your TypeScript code and in the generated JavaScript code, otherwise your breakpoints will not be recognised and processed correctly.

Because JavaScript debugging is supported only in Google Chrome and other browsers of the Chrome family, TypeScript can also be debugged only in these browsers.

To debug TypeScript code:

  1. Compile the TypeScript code into JavaScript using the built-in compiler, see Compiling TypeScript to JavaScript for details.
  2. In the editor, open the HTML files with the TypeScript references.
  3. Manually replace the references to the TypeScript files with the references to the JavaScript files that were generated through the compilation.
  4. Configure the JavaScript debugger.
  5. Configure and set breakpoints in the TypeScript code. Although actually debugging will be performed against the generated JavaScript, PyCharm will emulate TypeScript debugging using the generated source-maps that set correspondence between lines in the TypeScript and in the JavaScript code.
  6. Proceed as if you were debugging JavaScript:
    1. Initiate a debugging session. For details about local and remote debugging, about debugging single files and entire applications, see Debugging JavaScript in Chrome.
    2. Step through the program, stop and resume program execution, examine it when suspended, etc.

See Also

Last modified: 25 March 2017