Node.js Code Change Not Reflected in Localhost Browser Unless Webstorm is Restarted

I've spent a day on this already.  Because I can't continue to develop code if I have to keep restarting webstorm every time I make a node.js code change.

Here is a 1 minute screen cast of my problem: and here are my webstorm settings

A few initial facts:

  • I'm using Webstorm 10.0.3
  • I'm using nodemon which watches my code and stops and starts (creates a new node process) after I make changes to code
  • I've got my debugger | Live Edit set to Auto in Preferences.  I tried manual but it didn't make any difference in terms of my problem below
  • I've attached the code for you to try to reproduce

Here is what is happening:

1) I open webstorm (lets say it was already closed)
2) I run debug on my express.js app and it fires up fine meaning I can go to localhost:3000 and it loads fine
3) I make a breaking change to code such as what you see in the video above
4) I refresh the browser page, now I get a 404 error and that's actually expected because I broke the code with the breaking change I made
5) I now go back and undo that breaking change, back to where the code was working before
6) I refresh debug or click debug again or whatever
7) I refresh the browser, but still it's a 404, this makes no sense!
8) I ultimately have to restart Webstorm (including the invalidate cache) and start it up again for the localhost:3000 to load without the 404 error after making that change back to working code

I can't believe this happens.  I can't believe I'm the only one who has seen this problem.  But I also can't believe I can't resolve this!  is this a bug?  I'm using Webstorm 10.0.3.

Comment actions Permalink

Please can you make your video public? Can't watch it, it's reported to be private

Comment actions Permalink

ok it's public now...

Comment actions Permalink

Looks really strange. Just one thing: in youir video, at 0.59, I can see '404 Error' in the browser with 'WebStorm 10.0.3' below it. This indicates that WebStorm is actually listening on this port, so your express app can't listen on it - as it's occupied. Not sure how it can happen (as your app seems to start on this port first...) Please can you check the built-in port number specified in Settings/Build, Execution,Deployment/Debugger?

Comment actions Permalink

hehe the built-in port is set to 3000.  If I don't hard code that here too, my app runs on a random port and so the browser never loads the web page, it doesn't work.

Screen Shot 2015-06-03 at 11.35.52 AM.png

Under deployment I have no configured web servers:

Screen Shot 2015-06-03 at 11.36.10 AM.png

Comment actions Permalink

Please try a different free port (8000, for example). Or change your Express app to listen to a different one

Comment actions Permalink

I think that was it.  It's one of those things where you forget you changed something a while back....thanks for helping to trigger my memory.

I'm confused then how the debugger is attaching / communicating with the express app if the debugger is on a diferrent port.


Please sign in to leave a comment.