Debug Browserync Server

 What are you trying to debug - you application running on localhost:7203, I suppose? You don't need debugging NPM script then - you have to create a JavaScript Debug  run configuration (https://www.jetbrains.com/help/webstorm/2017.3/run-debug-configuration-javascript-debug.html) with http://localhost:7203 specified as URL and use it for debugging.

Just start your application as you normally do (via npm run start), add breakpoints, and then debug the configuration above

Please see https://www.jetbrains.com/help/webstorm/2017.3/debugging-javascript-in-chrome.html#d45288e154

The Problem is we use Typescript. So the Chrome Browser somehow knows about the sourcemaps when using BrowserSync. I can go into the developer tools and set a Breakpoint at a specific Typescript file.

However when I do as you say it will start the server in Chrome, with the notification, that JetBrains IDE Support is debugging. But the breakpoints wont trigger.

Can you see checkmarks in breakpoints? If yes - try refreshing the page in browser: breakpoints in code executed on page loading are not hit on starting the application, refreshing is required.

If checkmarks are not there, this indicates issues resolving files by a path specified in sourcemap ("sources" + "sourcRoot")

 Either the path is not valid (happens often when using Gulp gulp-sourcemaps), or some URL mappings are required

How can I change the path. Our build currently kind of looks like this:

var tsProject = $.typescript.createProject('tsconfig.json');

gulp.task('compile:ts', ['clean:ts'], function () {
    var tsResult = gulp.src(config.allTypescript)
        .pipe($.if(isDev, $.sourcemaps.init())) // This means sourcemaps will be generated
        .pipe($.typescript(tsProject))
        .on('error', function (error) {
            $.util.log('Typescript Compilation Problem detected. Exiting Build...');
            process.exit(1);
        });

    // Capture the buildOrder
    var jsOrder = tsResult.js
        .pipe($.filelist('filelist.json'))
        .pipe(replacep('src/', '.tmp/js/'))
        .pipe(gulp.dest(".tmp/"));

    var jsFiles = tsResult.js
        .pipe($.ngAnnotate({'gulpWarnings': false}))
        .pipe($.if(isDev, $.sourcemaps.write())) // Now the sourcemaps are added to the .js file
        .pipe(gulp.dest(config.paths.tmp + '/js'));



So to sum it up, we have a 'src' folder with all the Typescript. Then a 'tmp' folder with all of the transpiled JS Files. 

When using just

sourcemaps.write()

,typescript sources are inlined in generated .js file, no sourceRoot is set (or it is set incorrectly - depending on your plugin version). It's perfectly fine for Dev Tools - they work with runtime version, using inlined sources. But the IDE needs to map the generated files to actual files on disk somehow, so the correct path is necessary. Normally you need to specify a sourceroot relative to the sourcemap (or generated .js file if the sourcemaps are inlined). Like:

.pipe(sourcemaps.write( {
    sourceRoot: '../../'
}))

see also https://www.npmjs.com/package/gulp-sourcemaps

Thanks I needed a workaround for some JavaScript Files to match the right Path, but now it works :). Only problem I have is, that Webstorm behaves a bit slower than the Dev tools.