CODEWITHSUNDEEP
angulardebuggingphpstormwebstorm
piernik
piernik

Reputation: 3657

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

Upvotes: 8

Views: 5268

Answers (4)

lena
lena

Reputation: 93728

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

Upvotes: 22

Vlado Tesanovic
Vlado Tesanovic

Reputation: 6424

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

Upvotes: 2

Thierry Templier
Thierry Templier

Reputation: 202138

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

Did you make a try?

Hope it helps you. Thierry

Upvotes: -2

Wasiq Muhammad
Wasiq Muhammad

Reputation: 3118

You can use "Angular batarang" tool for debugging

Upvotes: 0

Related Questions