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

廉价感情. 提交于 2019-12-01 21:50:30

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!