How to debug angular2 seed project in PhpStorm/WebStorm?

Question

Angular2 is written in TypeScript.

I'm using Angular2 seed project and I can't get PhpStorm (WebStorm) to debug it - it's not stopping on breakpoint in .ts files.

Ho to do it?

Now I'm using JavaScript Debug with http://localhost:8080 as URL - no breakpoints :/

Answer 1

To debug in WebStorm, you need to make sure to generate the sourcemaps. To do this, open angular2-seed\webpack.config.js and add

devtool: 'source-map',

to webpack configuration; then create javaScript debug run configuration with http://localhost:8080/ URL, and add the following Remote URL mapping for the project root directory

webpack:///.

Now, start your server with npm start; once the server is started, run the configuration described above in debugger by pressing Debug

Answer 2

If you are using Chrome, write in your code ( where you want to break ):

debugger;

Open browser, hit F12 ( developer console ), than refresh page. Execution of your app should stop on that command.

Note, your tslint ( if you use that ) may complain of using debugger command. Edit your tslint.json file and put no-debugger to be true