Debug AngularJS and NodeJS in Webstorm At Once (Without CORS)

I have a client/server app running on NodeJS with an AngularJS frontend. I want to use the built in debugging features of Webstorm, but it just won't work.

Imagine following scenario:
I have a webstorm project with a client folder and a server folder. I can start the debuggers for the client and the server, and it works. But both sessions are on different ports. So an AJAX request to the server inside the client doesn't work without using CORS and telling AngularJS to use a different server address.
In the production version the client will be published under the server, but for developing there is no need to do this.

Does anyone know how achieve this? Something like: The system should behave like one server, under one URL.

Or is my approach stupid?
Best regards, Kersten

12 comments
Comment actions Permalink

I'm not sure I understand your setup. Why client and server are on different ports? Isn't your client code served by your server?

0
Comment actions Permalink

No, it is not served by the browser when developing...
But if I do this through Browser / Live Edit, breakpoints are ignored

0
Comment actions Permalink

Ok, this works right now. A HTTPS problem. But what about source maps. We concat everything in an app.js file. Can we debug the orginal files?

0
Comment actions Permalink

Yes - if the sourcemaps are generated while concatenating files. You don't need to do anything special to debug using sourcemaps - just  create breakpoints in your original files and run your code in  debugger... But your map files have to conform to Source Map Spec (https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US), and the generated js file should have the properly formatted //@ sourceMappingURL comment

0
Comment actions Permalink

But this doesn't work. In Chrome everything is fine. Source maps are available und breakpoints work like expected.
But in Webstorm no breakpoint is triggered in the original files. By the way, the sourceMappingURL comment should begin with "// #".

Previously the comment pragma was

//@
but due to some issues with that and IE conditional compilation comments the decision was made to change it to
//#
.

But anyway, changing this to //@ doesn't work neither. Do I'm missing anything?

Best regards,
Kersten

0
Comment actions Permalink

there must be smth special with sourcemaps - most probably, they don't conform to specification.
What tool do you use to produce them?


0
Comment actions Permalink

gulp-sourcemaps

 
gulp.task('concat', function () {
    gulp.src(paths.scripts)
        .pipe(sourcemaps.init())
        
.pipe(concat('concat.js'))
        .pipe(sourcemaps.write("."))
        
.pipe(gulp.dest('.'))
});
0
Comment actions Permalink

I see, thanks:) with these settings, gulp produces a strange sourcemap with 'fake' sourceRoot property value. Seems the debugger tries to resolve paths to sources relative to this non-existing source root instead of using the code inlined in the .map file. Try changing your gulp configuration so that the actual source root (relative to generated map file) is set, like:

 
gulp.task('concat', function () {
    gulp.src(paths.scripts)
        .pipe(sourcemaps.init())
        
.pipe(concat('concat.js'))
        .pipe(sourcemaps.write(".", {includeContent: false, sourceRoot: '../../src'}))
        
.pipe(gulp.dest('.'))
});



Debugging works for me when using similar configuration in WebStorm 10 EAP (doesn't work in WebStorm 9 :()

0
Comment actions Permalink

Thank you Elena! This works for me. So, in WebStorm 10 it works out of the box? Does it use the included content?

0
Comment actions Permalink

No, I just meant that gulp sourcemaps don't work for me in WebStorm 9 even with 'includeContent: false', but this configuration works in version 10. So it seems that you are more lucky than me:)
Sourcemaps with inlined content aren't supported at all. I've asked the developer to look into this issue

0
Comment actions Permalink

So maybe your path is not correct. I tried a little around, and finallly took "./src", which worked. My original code is in src, and the generated files (both, js and map) are a level higher.
Anyway, when using watch something breaks. Get this message:
----
9:04:45 AM Debug: Hotswap failed, automatically restarted.
           Disable auto restart if hotswap failed
9:04:51 AM Debug: {"code":-32000,"message":"Uncaught TypeError: Cannot read property 'line' of null"}






----
After that it is weird. Have to manually restart the debugging process...

Nothing special with the  task:

 
// Rerun the task when a file changes
gulp.task('watch', function() {
    gulp.watch(paths.scripts, ['uglify']);
});


And without watch, the whole working cycle makes no sense.

0
Comment actions Permalink

Don't see any problems when using gulp watch while debugging.
Please provide the whole stack trace

0

Please sign in to leave a comment.