Search code examples
angulardebuggingphpstormwebstorm

How to debug angular2 seed project in PhpStorm/WebStorm?

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 :/

Solution

  • 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