3

Does anyone know if it's possible to debug an application using angular-cli with the command line ng serve in WebStorm?. I tried the solution posted in this url:

How to debug angular 2 app using angular-cli webpack?

But it didn't work for me and I decided to make a new answer, because it's a little weird that angular-cli doesn't have some tools to do this.

Community
  • 1
  • 1
JVRM
  • 43
  • 5
  • What do you mean by `debug`? Can you have a look at the `augury` chrome plugin and let me know if this suits your needs? – borislemke Dec 09 '16 at 10:27

2 Answers2

2

Here is my run configuration for Angular2 (2.3) project built with angular-cli (1.0.0-beta.21)

enter image description here

Some things to check:

Do you have checkmarks shown in your breakpoints once the debugger is started and application loaded?

if not, seems sourcemaps are not loaded for some reason. Check if the mappings are correct: open http://localhost:4200/main.bundle.map in browser, see what URLs in "sources": look like. If you see smth like

"webpack:////User/devuser/Develop/MyWebApp/src/app/index.ts"

then URL mappings for root would be

webpack:////User/devuser/Develop/MyWebApp

If you see that the relative paths are used, change URL mappings accordingly.

If finally you can see the checkmarks, try refreshing browser page (important!!!) - are any of breakpoints hit?

If you manage to get sourcemaps loaded (you can see checkmarks, at least some breakpoints are hit on browser refresh) - you are done:) Your WebStorm configuration is now correct

lena
  • 90,154
  • 11
  • 145
  • 150
0

I finally got it working! I am documenting it here for myself and others to help in the future.

Note: Tested with Angular v6

Steps:

  1. Install JetBrains IDE Support chrome extension
  2. Go to options and set port 63342 (NOT 4200) as follows: enter image description here
  3. Now in webstorm IDE, go to run > Edit configuration.
  4. Click on + button select Javascript Debug and add setting as shown in below image, then click apply button. enter image description here
  5. Go to Settings > Build, execution and deployment > debugger and set as follows: enter image description here
  6. Run debugger (run > debug )
  7. Run ng serve like you would normally do in cmd/terminal.
  8. Run http://localhost:4200/ in Chrome
  9. Now you can set breakpoints within webstorm IDE and debug. enter image description here
dasfdsa
  • 7,102
  • 8
  • 51
  • 93