4

I am using WebStorm 2019.1.1 Build #WS-191.6707.60, built on April 16, 2019. I am attempting to debug an Angular application that is based on Angular 5.2. I followed the instructions on JetBrains support website as well as numerous YouTube videos but it looks like the debugger never runs or hits my breakpoint.

I setup my run/debug configuration as shown in the screen capture below. I am using the default Angular CLI configuration pointing to localhost:4200. The instructions at JetBrains support website say to launch the app via the green triangular "play" button and then once the app is running then click the "bug" icon next to the play button. This pops up a dialog warning that the project is not allowed to run in parallel (of which I cancel out). I have also tried just clicking the "bug" icon, and though the project compiles via webpack and runs it never stops at the breakpoints I set in WebStorm.

Run/Debug configuration

Parallel Warning

Debugging within Chrome using the dev tools works just fine and the breakpoints I set there work fine, however I really would like to be able to do the debugging inside of WebStorm.

The instruction also mention that WebStorm creates a default Angular Application configuration but I don't see one being created.

WebStorm documentation

I had this process working before when using the evaluation of WebStorm but after I bought a license and reinstalled WebStorm it no longer works. Any thoughts or suggestions?

Improve this question

2 Answers 2

Reset to default
4

You have Angular Application run configuration above npm group in JavaScript Debug but in your case it's collapsed.

If you don't have it there it looks like this: enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I am pretty sure the way I had it running previously was using node.js configuration. I would cick play and webpack would compile in the console. I would then have to manually launch my browser to localhost:4200 manually, but then it would hit breakpoints.
2

The Angular Application configuration that is created by default. Is just the "JavaScript Debug" profile with a custom name.

Click the "+" icon to add a configuration and select "JavaScript Debug".

The configuration you have in your example is for debugging JavaScript on the command line via NodeJS. It's for debugging a npm script.

You will also need to install the JetBrains browser extension. Here is the link for the Chrome browser (I'm not sure about other browsers).

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji

Without the extension the IDE will not remotely debug what's happening in the browser.

Improve this answer

3 Comments

I had thought that WebStorm no longer required the Chrome extension. Is this not the case?
@webworm you don't need the extension if you launch Chrome directly from the IDE. You need it if you want to attach the debugger to a running instance of Chrome. Honestly I never do the later.
I installed the chrome extension and when I select "Inspect in Webstorm" I get the notification that JetBrains IDE support is debugging this browser. However, I cannot hit any breakpoints.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.