How to debug angular2 seed project in PhpStorm / WebStorm?

Question

Angular2 is written in TypeScript.

I am using an Angular2 seed project and I cannot get PhpStorm (WebStorm) to debug it - it does not stop at a breakpoint in .ts files.

Ho do it?

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

Answer 1

For debugging in WebStorm you need to create source maps. To do this, open angular2-seed\webpack.config.js and add

 devtool: 'source-map', 

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

 webpack:///. 

Now start your server using npm start ; after starting the server, run the above configuration in the debugger by clicking Debug

Answer 2

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

 debugger; 

Open a browser, press F12 (developer console), than refresh the page. Your application should stop running on this command.

Please note: your tslint (if you use it) may complain about using the debugger command. Edit the tslint.json file and set no-debugger to true

Answer 3

You can use the Angular batarang debugging tool

Answer 4

Putting breakpoints in your TypeScript files and executing step-by-step processing in them is possible in Chrome Dev Tools.

Have you tried it?

Hope this helps you. Thierry