Firefox 不在调试器中显示 typescript (.ts) 源映射

Question

我只能看到 .js 文件，.ts 源没有出现在 Firefox 中。

它在 Chrome 中有效，我可以看到并在 .ts 文件中放置换行符，并且调试器工作得很好。但是 Firefox 将无法工作，没有版本，不是稳定版或夜间版或开发版。

难道是Mac/OSX上没有实现功能？如果是这样，互联网上应该有相关内容，但我什么也没找到。显然，该问题尚未在任何地方记录。

有没有人对此有任何了解，也许如何解决？

Answer 1

有点晚了，但希望能有所帮助。

对于 Firefox，请确保您已 "Show Original Source" 在调试器设置中选中。

下一步，你的编译的javascript必须有一个绝对路径引用到你的.map文件，路径引用应该出现在你编译的js文件的末尾并且将如下所示：

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

您可能有一个 sourceMappingURL 但指定为相对路径。 FF 似乎不喜欢 sourcemaps 的相对路径。

当然这是在你编译的js中所以每次你将ts编译成js你都需要重新设置sourceMappingURL。这很快就会让人厌烦。

如果您正在使用 Gulp（或者可能是其他任务运行器），您可以为 gulp.task 中的映射 URL 设置一个前缀选项 (sourceMappingURLPrefix) ] 编译你的打字稿。（参见 https://github.com/floridoo/gulp-sourcemaps）

我编译的 .js 位于 \dist 及其子文件夹中。不幸的是，前缀选项对子文件夹没有帮助。幸运的是 Gulp 也可以通过为 sourceMappingURLPrefix.

指定一个函数来处理这个问题

该函数传递了一个对象，该对象具有编译后的 js 的路径，因此通过一些字符串操作，您也可以创建 .map 文件的路径（我的都在同一个文件夹中）。

我的 gulp 构建任务如下所示（参见 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));
});

这现在为我编译的 js 中的 sourceMappingURL 生成一个绝对路径，它也正确引用子文件夹，如下所示：/# sourceMappingURL=http://localhost:9000/dist/customElements/listview.js.map

Firefox 正在按预期加载 .ts 文件和调试器功能。它也在 Chrome.

中工作

我不是 Gulp 专家所以如果有更好的方法我很想知道。

更新：我最近改用 aurelia-cli，到目前为止，我发现它比 Gulp+jspm 简单得多。 Firefox 和 Chrome 无需任何配置即可正确获取 .ts 文件。

Firefox 不在调试器中显示 typescript (.ts) 源映射

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

macos

firefox

firefox-developer-tools

firefox-developer-edition

osx-elcapitan