ng2 Debugging Breakpoints Not Hit

Avatar
Markondotnet
Created

Version: WebStore 2016.3

Hello, 

I just recently purchased WebStore 2016.3 and am new to WS altogether. I primarily use Visual Studio but have been wanting to start using WS for some time...so here I am.

I have the Angular2 QuickStart app built. I also have the Chrome JetBrains IDE Support plugin installed. To begin, I issue a 'npm start' in the terminal and the browser opens and runs the app. I then click the Debug icon (top right by my run config selection) to begin debugging. The JB IDE Support plugin loads fine and the Angular QuickStart page opens and I see the yellow band that displays "'JetBrains IDE Support" is debugging this browser".

If I place a breakpoint in my code and perform some action, it is never hit; however, If I add a 'debugger' statement, it is.

Two questions:

1) Does anyone have an idea what might be going on here?

2) Can anyone point me to some clear documentation on properly setting up a project (which plugins are required - WS webpack debugging, JB IDE Support, etc.) so I know how to properly setup these projects so everything works?

Thanks you for your help! 

-Mark

Votes

0

Share

3 comments
Avatar
Elena Pogorelova
Created

To debug https://github.com/angular/quickstart app in WebStorm 2016.3.3, try the following:

- create a JavaScript Debug run configuration, specify http://localhost:3000/ as URL, set http://localhost:3000/ as Remote URL for project src folder.

 

- set breakpoints in application .ts files (breakpoints added during debug session won't be hit, you need adding them beforehand!)

- run npm start to start the server

- once application is up and running, press Debug.

1
Avatar
Markondotnet
Created

Thank you so much Elena!!

That did the trick. So I'm guessing the key pieces to this were:

  • Selecting the src folder and
  • Entering the URL in the Remote URL cell on the src row.

Regarding selecting the src folder...by doing this, are we just specifying where our app is located (in other words, that's our project's root)?

Thanks again!!

-Mark

0
Avatar
Elena Pogorelova
Created

By specifying URL mappings, you map the absolute URL address on the server to the local path. In simple cases, where directories structure on server matches local structure down from the root, you actually mark the certain folder (src in your case) as server doc root

0

Please sign in to leave a comment.