Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 960
piernik Avatar asked Jan 14 '16 09:01

piernik


People also ask

How do I debug angular projects in WebStorm?

Hold Ctrl+Shift and click this URL link. WebStorm starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug.


2 Answers

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

like image 172
lena Avatar answered Sep 28 '22 07:09

lena


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

like image 23
Vlado Tesanovic Avatar answered Sep 28 '22 07:09

Vlado Tesanovic