Debugging Angular.JS controllers and services with WebStorm 8

Hello,
I created a new Angular app through https://www.npmjs.org/package/generator-angular-fullstack . The code runs fine through terminal with `grunt serve`. Also, WebStorm8 is able to run my serve grunt task. However, I want to be able to *debug* the AngularJS code (controllers, services) inside WebStorm. Setting up my breakpoints in the controllers and running the Grunt serve task (through WebStorm's Grunt Console), does not hit the breakpoint. The browser is open and the JB debug extension is installed and running. Is there anything else I need to do in order to debug client side code from AngularJS app?
Mac OS - Maverics
WebStorm 8.0.1
Node - 0.10.21
AngularJS - 1.2.11
I can provide the code upon request.
Thanks,
- George

1 comment

debugging of the client code (Angular) works for me when using projects created by angular-fullstack

Things I had to change:
- modified the Gruntfile.js to avoid auto-running page in my default browser (as I'd like it being run in Chrome with js debugger enabled and don't like to have the page being opened in 2 browsers at the same time). Modified file attached - all I did was commenting out 'open' task

- created as Node.js run configuration to run Grunt, with 'Browser/Live ediot' options enabled (see nodeGrunt1.png)

- in the JavaScript Run configuration that was auto-generated as a result of running configuration above, set the Remote URL mappings (mapped app folder to server root URL) - see jsGrunt.png


Now set breakpoints in app/scripts/controllers/main.js and run the Grunt server run configuration - page will be loaded in Chrome, breakpoint is hit



Attachment(s):
jsGrunt.png
nodeGrunt1.png
Gruntfile.js
0

Please sign in to leave a comment.