Search code examples
angulardebuggingwebstorm

Unable to debug Angular with WebStorm

I have an Angular application (Angular 2) that I can launch without issue from WebStorm, however when I try and set breakpoints none of them are ever hit. WebStorm reports that the debugger is attached and that webpack has compiled successfully. I open my browser to localhost:4200 and my app loads fine, it's just that none of my breakpoints are hit. I also have the JetBrains IDE extension installed but my understanding was that it wasn't necessary anymore.

enter image description here

enter image description here

Solution

  • I finally got it to work after much trial and error.

    1. I setup a debug configuration using the WebStorm "npm" template (screen capture below). You can ignore the Script parameter in the screenshot as this is simply an alias (located in package.json) pointing to a JSON file that contains proxies for external API endpoints (DEV, Production, Stage, etc)
    2. From here I could launch my Angular application and webpack would compile everything
    3. At this point my application would run normally but no breakpoints would be hit. Then I installed the JetBrains IDE Support Chrome Extension. Once installed, I right clicked on the extension and chose "Inspect in WebStorm" option. At that point the WebStorm IDE opened a second DEBUG window named "localhost:4200". The any breakpoints I had set were hit whenever I triggered them.

    So they key was the JetBrains IDE support Chrome Extension. It was my understanding that this was no longer needed in the newer versions of WebStorm but it appears that to debug my Angular application it is still required. It can be downloaded from the Chrome Extension store here.

    I hope this helps someone else out because it drove me nuts for the longest time.

    NPM Debug Configuration NPM Debug Configuration

    Webpack compiling Webpack compiling

    Debug window at http://localhost:4200 Debug window at http://localhost:4200