How can I debug an Angular website started with grunt serve inside WebStorm?

Question

I am trying to debug my AngularJS site from within WebStorm. The site is served with "grunt serve". I have the Jetbrains IDE support plugin installed in Chrome and it is configured to work on the default port 63342.

I use

• Windows 8.1 as development platform
• Webstorm 2016.3.1
• "grunt-contrib-connect": "~1.0.2"

In Webstorm I created a run-configuration of type JavaScript debug. In there I have put:

• URL field to http://localhost:9001 which is the same as configured in the gruntfile.
• Browser: default (chrome)
• Remote URLS of local files: src folder mapped to http://localhost:9001

When I run grunt serve, my site starts in chrome. When I hit the debug button for the JavaScript debug configuration, The debugger window shows but after a while a popup says "Waiting for connection from JetyBrains IDE Support extension" from Chrome. Please ensure you have installed..."

I also do not get the yellow popup in Chrome telling that the Jetbrains IDE Support extension is functional.

When I go and look in the console for _generated_background_page.html of the Jetbrains IDE Support extension, I see the following message:

IN [21,"Debugger","attach",["http://localhost:9001",true]]

But then nothing happens anymore.

Does someone have a step by step manual on how to debug an AngularJS site ran with Grunt serve from within WebStorm?

Answer 1

I found it: I needed to change the host setting in the options of the Jetbrains IDE Support extension. It had the value of "127.0.0.1" and when I changed it to "localhost", things started to work out!