Debugging with webstorm doesn't stop of breakpoints

[iangregsondev]

Hi there,

Great generator! I found a small problem, it may not be associated with the generator but according to stackexchange I have setup the correct way of debugging a node.js controlled by grunt. I thought I may put my findings here, maybe somebody else is experiencing same issue or has a fix, or is it a known problem ?

I don't need debugging when developing angularjs but i have found i do need it when developing the backend part (express.js / node.js)

I am lost :-)

I setup debugging via this

http://stackoverflow.com/questions/17043484/grunt-debugging-from-webstorm?rq=1

Here is the output from webstorm, it takes a while for the browser to launch but eventually it launches and everything seems ok and I am able to view the site here http://localhost:9000/

But i have added breakpoints to controllers, server.js etc and nothing is hit.

Its a little suspect as I get "ReferenceError: Process is not defined" below but running from the the command line direct doesn't cause this problem.

"C:\Program Files\nodejs\node.exe" --debug-brk=61951 C:\Users\gregsoni\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt serve
debugger listening on port 61951
[ReferenceError: process is not defined]
Running "serve" task
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "concurrent:server" (concurrent) task
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]

Running "copy:styles" (copy) task

Done, without errors.

Running "compass:server" (compass) task
directory .tmp/styles/
create .tmp/styles/main.css (1.237s)
Compilation took 1.239s

Done, without errors.

Running "autoprefixer:dist" (autoprefixer) task
Prefixed file ".tmp/styles/main.css" created.

Running "express:dev" (express) task
Starting background Express server
connect.multipart() will be removed in connect 3.0
visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives
connect.limit() will be removed in connect 3.0
Express server listening on port 9000 in development mode

Running "open:server" (open) task
Successfully connected to: mongodb://localhost/test
finished populating things

Running "watch" task
Waiting...GET / 304 10ms
GET /partials/main 304 2ms
GET /api/awesomeThings 200 8ms - 1.03kb

[DaftMonk]

This is a good question. I'd like to do this as well, however I've only been able to get webstorm to debug when it's running the server itself. But then you don't have use of the other grunt tasks, like watchers.

This shouldn't be a problem with the generator, however it may be a problem related to grunt and or the grunt-express-server.

Maybe someone who has had a bit more experience with webstorm can help figure this out.

[iangregsondev]

Thanks. Its nice to know its not just me. Can I propose we leave this open to see if anyone else has a work around. It would be really nice if we could do it.

[bcgov]

I am able to enable debugging of server-side code served by express by setting debug to true in gruntfile.js:

grunt.initConfig({
     ...
 express : {
    options : {
        port : process.env.PORT || 9000
    },
    dev : {
        options : {
            script : 'server.js',
            debug : true //enable debugging
        }
    },
    ...

[jeef3]

Yeah, that's exactly what #32 does.

[DaftMonk]

That's fantastic! Works like a charm. Thanks for the pull request.

While we're on the subject, is there a way to get webstorms debugger working for client javascript as well? Still seems to ignore those breakpoints.

[jeef3]

I don't actually use WebStorm much anymore, so I'm not sure. It might be possible with Chrome DevTools Remote debugging? But that limits your debugging to Chrome.

[DaftMonk]

I've figured out how to get it debugging in webstorm on the client as well. Instructions are here http://www.jetbrains.com/webstorm/webhelp/debugging-javascript.html

Basically you just add a run configuration for javascript debug and set the url to localhost:9000, or whatever port you're using.

The critical step I was missing was that you must then map the app/scripts folder to http://localhost:9000/scripts in the configuration. Then just run it alongside your server debug and you've got debugging fully enabled!

[iangregsondev]

Nice work guys! thanks for all the hard work.

With regards to client side debugging, i have always used chrome dev tools, but maybe i will take a look at webstorm.

Just out of interest whats the best way of applying this patch to my already installed generator?

Of course I do see its only one line change so I could make this change manual but was wondering what the standard way of patching an already installed generator until a new release is released via bower (for example)

I presume i need to do a git pull onto the directory where the generator is installed (under my appdata/roaming)??

Thanks again.

[DaftMonk]

One relatively easy way would be uninstall generator-angular-fullstack from npm, clone the repository somewhere, then type npm link from the folder. This way you can make whatever edits to the generator you want, in addition to pulling any new commits.

[iangregsondev]

Nice. Thanks.

[jeef3]

I've figured out how to get it debugging in webstorm on the client as well. Instructions are here http://www.jetbrains.com/webstorm/webhelp/debugging-javascript.html

Very nice 👍 Some of us are using WebStorm, so that will come in handy.

[cwagner22]

I have the same issue... I have the last version of the generator (with debug set to true in gruntfile.js) and WebStorm 8 EAP.
I have also configured WebStorm as explained above. The server is working but the breakpoints aren't hit.
When I start the server another tab opens with the name 'MyApp slave #1' (connected to the port 5858). Not sure if it's normal but there is no more information, not even in the console.

Extract of the first tab output:

"C:\Program Files (x86)\JetBrains\WebStorm 134.1081\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" --debug-brk=22636 --nolazy C:\Users\Chris\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt serve
debugger listening on port 22636
Running "serve" task
...
Running "express:dev" (express) task
Starting background Express server
debugger listening on port 5858
info: socket.io started
Running "open:server" (open) task
Running "watch" task
Express server listening on port 9000 in development mode
GET / 500 6ms - 1.4kb
db connection open
finished populating things
finished populating users

[DaftMonk]

@jitowix Did you follow the instructions as explained in #32? It works for me.

Also if remote debugging doesn't work for you, you could add a node configuration to webstorm that launches the server.js, and run that in debug mode.

[cwagner22]

@DaftMonk Thanks for your reply. Unfortunately the only way I've been able to make the debugging working is by running "grunt serve" from the terminal and creating a remote debug task in WebStrom. (which is not really handy)

Launching grunt from a task is still not working properly (breakpoints not hit)... Here is my config:

I've tried with WebStrom 7 and other apps and I've the same issue. I'd appreciate any help.

[cwagner22]

Well using grunt-express instead of grunt-express-server seems to have fixed my issue. No needs to attach any remote debugger with this one.

[DaftMonk]

Glad to see you were able to resolve it. Would you mind posting your grunt configuration? I might want to try that out.

[cwagner22]

Spoke too soon. grunt-express isn't exactly what I need.
I finally managed to make grunt-express-server working in debug mode, but only by setting the 'background' option to false. Unfortunately this prevent the next tasks (open and watch) to run as the server is started in the same process as grunt....
Without the background option disabled, here is what I got when I launch the server from grunt:

I have to manually stop the 2nd task (slave #1) and then launch the remote debuger to debug my app.
Can you tell me how it works for you? Spent the whole day on this damn issue...

[jeef3]

@jitowix Does it work if you run just grunt serve just from a regular command line (not within WebStorm), and then try connecting to the instance using the steps in #32

[jeef3]

@jitowix Sorry, just re-read your issue. That works fine, the problem is running from within WebStorm.

[cwagner22]

@jeef3 Indeed, thanks anyway... I also tried on Ubuntu, same issue.

[DaftMonk]

@jitowix Sorry, I understand your frustration.

I run grunt serve as an external tool, configured like this

Then I run the debug configuration in #32 separately.

Because this is debugging using the standard --debug paramater, I can only effectively set break points on code that I can trigger after the server has started up, like api routes.

Alternatively, setting up a node configuration within webstorm and running it in debug mode allows you to set break points anywhere, because it runs the process with --debug-brk. Unfortunately, you can't run any grunt tasks when debugging this way.

I'm looking at using grunt-nodemon, instead of grunt-express-server, because it allows you to use --debug-brk when launching the node process.

[cwagner22]

Thanks very much for sharing your config, really appreciate it. However the breakpoints issue seems to have been fixed in WebStorm 8 :)

[DaftMonk]

That's awesome, I'm looking forward to upgrading. :)

[thiagohac]

DaftMonk, I'm using the Grunt integrated in WebStorm. You dont need configure it in external tools.
Grunt integrated (WebStorm 8 recognizes your gruntfile.js) + Node.js remote debug (127.0.0.1 and 5858). This can do the trick.

[cwagner22]

@thiagohac Nice trick but manually restarting the Node.js remote debugger every time the server restarts is a bit annoying.

[qt911025]

My way is delete the sub-target "concurrent:debug" of task "serve:debug"(I made another target named "debug-pre").
Then I just configured WS debug (same to spy-js) as usual, and add the grunt task("serve:debug-pre") above to "External tool".
I use "Settings"->"Build, Execution, Deployment"-> "Debugger" -> "Live Edit" instead of running nodemon.

I'm so confused before understanding Grunt and tasks in Gruntfile.

[bjackson]

Has anyone found a solution to using WS's grunt, without restarting the debugger each time the server restarts?