Firefox isn't showing typescript (.ts) source maps in the debugger

Question

I can only see the .js files, the .ts sources don't appear in Firefox.

It works in Chrome, I can see and place line breaks in .ts files, and the debugger works great. But Firefox will not work, no version, not the stable or the nightly or the developer version.

Could it be that the functionality is not implemented on Mac/OSX? If so, there should be something on the internet about that, but I've found nothing. Apparently, the problem has not been documented anywhere.

Does anyone have any knowledge of this, and perhaps how to fix it?

Answer 1

A little late but hopefully helpful.

For Firefox make sure that you have "Show Original Source" checked in the debugger settings.

Next, your compiled javascript must have an absolute path reference to your .map file, the path reference should appear at the end of your compiled js file and will look like this:

//# sourceMappingURL=http://localhost:9000/dist/customElements/listview.js.map

It is likely that you have a sourceMappingURL but specified as a relative path. FF doesn't seem to like relative paths for sourcemaps.

Of course this is in your compiled js so every time you complile ts to js you will need to reset the sourceMappingURL. This becomes tiresome very quickly.

If you are using Gulp (or probably other task runners) you can set a prefix option (sourceMappingURLPrefix) for the mapping URL in your gulp.task that compiles your typescript. (see https://github.com/floridoo/gulp-sourcemaps)

My compiled .js resides in \dist with sub-folders. Unfortunately the prefix option doesn't help with sub-folders. Fortunately Gulp can handle this as well by specifying a function for the sourceMappingURLPrefix.

The function gets passed an object which has a path to the complied js, so with a bit of string manipulation you can create the path to the .map file as well (mine are together in the same folder).

My gulp build task looks like this (see sourceMappingURLPrefix):

gulp.task('build-system', function() {
    if(!typescriptCompiler) {
         typescriptCompiler = typescript.createProject('tsconfig.json', {
         "typescript": require('typescript')
      });
 }
return gulp.src(paths.dtsSrc.concat(paths.source))
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(changed(paths.output, {extension: '.ts'}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(typescript(typescriptCompiler))
    .pipe(sourcemaps.write('.', {
        includeContent: false, 
        sourceRoot: '/src',
        sourceMappingURLPrefix: function (file) {
            var mapPath = file.path.split(/[\\\/]/); //split path into component parts
            return 'http://localhost:9000/dist/' + mapPath.slice(1, mapPath.length - 1).join('/') //prepend my local webserver and dist folder then re-join discarding the last slice which is the compiled .js file name.
        }
    }))
    .pipe(gulp.dest(paths.output));
});

This now produces an absolute path for the sourceMappingURL in my compiled js that also correctly references subfolders, like this: /# sourceMappingURL=http://localhost:9000/dist/customElements/listview.js.map

Firefox is loading the .ts files and the debugger functions as expected. It also is working in Chrome.

I'm no Gulp expert so if there is a better way I am keen to find out.

update : I recently have switched to using aurelia-cli which, so far, I am finding far simpler than Gulp+jspm. Both Firefox & Chrome correctly pick up the .ts files without any configuration necessary.