Debugging TypeScript

To debug TypeScript code, perform these general steps:

1. Transpile the TypeScript code into Javascript using the built-in compiler or a TypeScript file watcher, see Transpiling 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 transpilation.
4. Configure the JavaScript debugger.
5. Configure and set breakpoints in the TypeScript code. Although actually debugging will be performed against the generated JavaScript, PhpStorm 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.
   2. If you are using Chrome, install and configure the JetBrains Chrome Extension. For details, see Using JetBrains Chrome Extension.
   3. Step through the program, stop and resume program execution, examine it when suspended, etc.