Debug Angular 5 app on Web Storm

I have an angular app and I would like to debug on it: breakpoints, watch variables values, etc

The app is in angular 5, I am using node 9 runtime with nvm, and It was generated with Angular-CLI, so let´s start.

I am using Web Storm 2017.3

JetBrain IDE plugin on Chrome

First Add the plugin to chrome

Web Storm IDE

First on a web stom terminal

$ node use -v 9
$ npm start
> apex@4.1.0 start 
/Users/pabloinchausti/Desktop/DevOps/code/github/PabloEzequiel/UELA-2.0/apex-uela/apex-uela-v2.0
> ng serve --port 4600 -aot

The app is listening on localhost:4600 (I have changed it in package.json, normal is 4200)

Add “Javascript Debug” on Run Configuration

In URL, we paste out http://localhost:4600

Ok, I have the break point on the app:

It was all I needed, so, I will stop the post here.

References

Debugging Angular apps created with Angular CLI in WebStorm