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

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?

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

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?

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

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

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

gulp-sourcemaps

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

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 :()

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

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

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"}

// 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.

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