Firefox在调试器中没有显示TypeScript (.ts)源代码映射。

Question

Firefox在调试器中没有显示TypeScript (.ts)源代码映射。

macosfirefoxosx-elcapitanfirefox-developer-toolsfirefox-developer-edition

6

我只能看到 .js 文件，.ts 源文件在 Firefox 中不可见。

在 Chrome 中可以正常工作，我可以查看和插入 .ts 文件中的换行符，并且调试器也很好用。但是 Firefox 不行，无论是稳定版、夜间版还是开发者版都不行。

可能是 Mac/OSX 上没有实现这个功能吗？如果是这样的话，应该有关于此的一些信息，但我没有找到任何有用的信息。显然，这个问题还没有被记录在任何地方。

有人了解这个问题，或者知道如何解决吗？

- Kesarion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robs · Accepted Answer

有点晚但希望有所帮助。

对于Firefox，请确保在调试器设置中选中“显示原始源代码”。

接下来，你的编译JavaScript必须有一个对你的.map文件的绝对路径引用，该路径引用应出现在编译后的js文件末尾，并且看起来像这样：

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

很可能你有一个sourceMappingURL，但是指定为相对路径。FF似乎不喜欢用于sourcemaps的相对路径。

当然，这是在你的编译后的js中，所以每次你将ts编译为js时，你都需要重置sourceMappingURL。这很快就变得烦人了。

如果你使用Gulp（或者可能还有其他任务运行器），你可以为编译typescript的gulp.task设置一个前缀选项（sourceMappingURLPrefix）用于映射 URL。（请参见https://github.com/floridoo/gulp-sourcemaps）

我编译后的.js位于\dist目录下的子文件夹中。不幸的是，prefix选项无法处理子文件夹。幸运的是，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 文件，无需任何配置。