Gulp build with source map

If sourcemaps are there, you should be able to debug - just create a JavaScript Debug  run configuration (https://www.jetbrains.com/help/webstorm/2017.3/run-debug-configuration-javascript-debug.html) with your server address specified as URL and use it for debugging. See https://www.jetbrains.com/help/webstorm/2017.3/debugging-javascript-in-chrome.html#d45288e154

Please also check this thread: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000666010-Debug-Browserync-Server

Thanks! Setting sourceRoot worked for sources in one directory and my breakpoints work in webstorm. As you can see I have sources in multiple directories. And I can only define one sourceRoot.

var jsFiles = [
        'Content/src/js/clipboard/lib/clipboard.js',
        'Content/src/js/clipboard/dist/ngclipboard.js',
        'Content/src/js/dropzone/cloud_dropzone.js',
        'Content/src/js/ngdropzone/ng-dropzone.js',
        'Content/src/js/chart.js',
        'Content/src/app/app.js',
        'Content/src/app/e2e.js',
        'Content/src/app/components/**/*.js',
        'Content/src/app/directives/**/*.js',
        'Content/src/app/services/**/*.js'
 ];

gulp.task('js', function () {
    jsFiles.splice(0,0,'Content/temp/mockData.js');
    return gulp.src(jsFiles)
        .pipe(sourcemaps.init())
        .pipe(concat('main.js'))
        .pipe(sourcemaps.write(".", {includeContent: false, sourceRoot : "../../src/app/services/"}))
        .pipe(gulp.dest('Content/target/js/'));
});

You can't have more than 1 sourceRoot in sourcemaps anyway. Just make sure that the specified root is common for all your sources - let it be Content/src, for example

Strange thing is that if I set path in jsFiles to "Content/src/app/components/**/*.js" then I get in sources array of source map "clients.component/clients.component.js". If I set path in jsFiles to "Content/src/app/**/*.js" then I get in sources array "components/clients.component/clients.component.js". The way I define glob determines relative path in source map.

Yes, looks as if this is the expected behavior of gulp-sourcemaps, though it doesn't seem to be documented anywhere

Note that if you don't like using glob patterns, you can specify the common root all paths in sources will be relative to using the base property (https://github.com/gulp-sourcemaps/gulp-sourcemaps#handle-source-files-from-different-directories):

return gulp.src(jsFiles, {base: 'Content/src'})
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))