Storm & Debugging (AngularJS) not working in one Project

I've completely hit a wall and I don't know where to start looking. I have two projects. Debugging works perfectly in one of the (git pulled todoMVC folder). I've set up a project myself (and downloaded the angular-seed on a third attempt) and I can't get the debugging to hit breakpoints on either of the new projects. When I copy my new project into the folder of the first (todoMVC), I can debug the exact same code that wouldn't work in its own project.

I start the session via live debugging with identical configurations on my local xampp install.

I get the following errors in Storm. Line 7 is where I've set the breakpoint.

Capture.PNG

Any suggestions on what I could try?
When I don't set a breakpoint I get a few "Failed to load resource" errors on .js.map files but that seems to be an inconsequential bug as far as I've found out...

Thanks for your time!

13 comments

Hello!

does your application run fine if no breakpoints are set? I.e. are all files successfully loaded in the browser, etc.?
What does your Javascript Debug run configuration look like?

0

Hi Elena,

yes the app starts fine without debugging. So far it's almost exactly the angular-seed project so not much going on.

The dbeug config simply points to the url, right? I'm not doing anything before launch. I'm talking about the "Run/Debug Configurations" window...

What I did just find out is that the breakpoints work if I select the file in the document path (c:\xampp\...) rather than going through the web server and localhost.

The todoMVC, where debugging works, also goes through the server though and the debug config is otherwise identical (or maybe I just don't know where to look?!?). It has to be something along those lines. Are there any files in the project that are able to influence the config of the server or Storm?

When I run the debug in the todoMVC Storm opens the file in question in a new read only tab, which I presume is the expected behaviour. That doesn't happen in the seed project. I'm probably missing some config step that I can't think of.

Is there something beyond the simple path in "Run/Debug Configurations"?

I'm still clueless.

0

I can't seem to edit my last post...

I've now run a simple node server that comes with the seed-app and everything works fine.

I would still like to understand what was going wrong with my previous setup. It's probably a good idea for me to get acquainted with node so this isn't all bad.

Thanks

0

Hello!

I can't comment on your previous setup as I have no idea what it looks like:)

>Are there any files in the project that are able to influence the config of the server or Storm?

in Storm - no. But the way you run your application definitely depends on application code. For example, you can't just open HTML served by a node.js server in browser and expect the code to work without running the server itself

>Is there something beyond the simple path in "Run/Debug Configurations"?

it depends on a way you run your application:) For a simple web application being run onh a builkt-in web server, the page URL is all you need. For external servers remote URL mappings are required, etc.

Please can you attach the project that shows your initial setup so that I can see what's wrong with it?

0

I've used the same code in a different project successfully with no apparent difference in terms of server (xampp). On my node.js server everything is fine so I'm happy to use that for now. Would the .idea folder be any use to you, given that the actual code doesn't seem to have an impact on whether the debugging works?

0

No :( just an .idea folder wouldn't give me a clue, as I don't know what your application looks like - and the the configuration absolutely correct for one application would be wrong for another

0

Cliffnotes edition of this post:
I guess the main question is whether it even makes sense to use "grunt server" with live editing (this guy is doing it also: http://stackoverflow.com/questions/19769069/webstorm-7-yeoman-angular-missing-sourcemaps-failed-to-load-resource-the-ser)... Does it? How do I get it to work?

Here is my attempt to make it 100% reproducable. The goal is to use Yeoman and Friends to run a node.js server

  1. Create new Yeoman scaffolding as per website instructions:
    • yo angular
    • bower install angular-ui
  2. Storm
    1. "New project form existing files"
    2. Web server locally
    3. /path/to/yeo -> Project Root
    4. Use existing server (this shouldn't matter, right? I'll be starting the server via grunt)
  3. Project is open, now I add the debug/run config
    1. Add Node.js config:

run_debug_cfg.png
debug_live.png
Finally: Shift + F9 --> Debug

Right?

When I do that, I only get the following console message:

"C:\Program Files\nodejs\node.exe" --debug-brk=58249 C:\Users\Seb\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt server
debugger listening on port 58249

But no Chrome window opens.

When I select "Run" as in Shift + F10, two tabs open in chrome, one on 127.0.0.1:9000 and one on localhost:9000.

I presume the first one is being loaded by Grunt, since I always specified the server as "localhost"?!?

How do I get Grunt to cooperate with Storm and live editing? Does it even make sense to do that?

When I start the simple node server that comes with the Angular seed app and create a Javascript debug config it works and I get to debug as well.

I guess the main question is whether it even makes sense to use "grunt server" with live editing (this guy is doing it also: http://stackoverflow.com/questions/19769069/webstorm-7-yeoman-angular-missing-sourcemaps-failed-to-load-resource-the-ser)... Does it? How do I get it to work?

Thanks for your time. Obviously I'm diving head first into a deep pool when I'm not sure I can swim but I'm keen to learn so here I go.

edit: my preliminary conclusion is that the only reason that the Grunt debug isn't working is the fact that in some way, shape or form the server that Grunt starts does not like to be debugged by Storm. Learning Node is somewhat down my list so I guess I'll simply use the server that works and forget about Grunt for now since it's not really a priority.

0

Hello!

sorry for the delay with getting back to you - these days were busy...
I've created the project and configuration using your steps. Debugging works as expected for me. Just 2 additiuonal steps:

- I changed 'open' livereload option from 'true' to 'false' in gruntfile to avoid a seconf tab being opened on 127.0.0.1:9000 - I only need a single Chrome tab opened with javascript debugger on localhost:9000
- I put breakpoints in app.js

Started my Node.js run configuration in debugger - here is the output:

"C:\Program Files\nodejs\node.exe" --debug-brk=55284 C:\Users\Elena.Pogorelova\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt server
debugger listening on port 55284
[ReferenceError: process is not defined]
Running "server" 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]
[ReferenceError: process is not defined]
[ReferenceError: process is not defined]

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

Running "concurrent:server" (concurrent) task
    
Running "coffee:dist" (coffee) task

Done, without errors.
    
Running "copy:styles" (copy) task


Done, without errors.
    
Running "compass:server" (compass) task
directory .tmp/styles/
       create .tmp/styles/main.css (2.447s)
    Compilation took 2.45s
    
Done, without errors.

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

Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:9000.

Running "watch" task
Waiting...

The page is successfully loaded, debugger stops on breakpoint.

>I guess the main question is whether it even makes sense to use "grunt server" with live editing

by live editing, do you mean enabling the 'after launch' in Live Edit/Browser tab of run configuration? Or using the livereload Grunt task?
The former does make sence for me even if you aren't going to use WebStoirm Live Edit feature - as you have the browser started automatically on launching your node.js configuration, so that you don't need to do this manually

0

No worries. I'm glad you're looking into it.

I've disabled the livereload option, which makes sense. It explains the extra window I had open.

However, when I start debugging via the "Run (Shift F10)" button, the server starts and the tab opens as expected BUT I don't ever hit the breakpoint and get a host of errors:
http://pastebin.com/Lxk9vbDY

When I try to start the process via the "Debug" button, I only get the following message in the debug console and nothing happens after that:
"C:\Program Files\nodejs\node.exe" --debug-brk=49659 C:\Users\Seb\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt serve
debugger listening on port 49659

When I start debugging with the default Angular Seed server, I hit the breakpoint and don't get the error messages.

I'm guessing that starting via the Debug rather than Run option is just wrong for some reason (I'm using PHPStorm rather than Webstorm, in case that makes a difference with anything).

Otherwise my conclusion is that the node server that grunt is configured to run does not cooperate with Storm in my case...

I've attached the server that does work for me...



Attachment(s):
web-server.js
0

I don't see any 404 errors when running/debugging my code. Note that I  don't put it in any web server doc root, as it doesn't need a webserver  to run - files are served by server created using Grunt connect task.

I've tried to attach a project for your reference, but it is too large
:(

0

I thought I'd dig this one back up since I saw there is also a bug being tracked...

I've now updated to PHPStorm 7.1 and now the debugging is working!

When using one of the MEAN seeds out there, which uses an ExpressJS server, I've had to include some path mapping to avoid the "read only popup" but everything is working now!

I'm over the moon!

PS: For some reason Storm did want to update even when I manually checked for updates but the manual update worked.

0

It seems it is working due to our improved magic mappings :)

>> to avoid the "read only popup"
Could you please attach test project and I will fix it?

0

There is no need to fix anything. I simply added the path mappings in the debug config so now everything works great.

0

Please sign in to leave a comment.