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

Posted 2023-02-27

【中文标题】Firefox 未在调试器中显示 typescript (.ts) 源映射

【英文标题】：Firefox isn't showing typescript (.ts) source maps in the debugger

【发布时间】：2016-09-20 06:44:12

【问题描述】：

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

它可以在 Chrome 中运行，我可以在 .ts 文件中查看和放置换行符，并且调试器运行良好。但是 Firefox 不行，没有版本，stable 或者 nightly 或者开发者版本都不行。

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

有没有人知道这方面的知识，或者如何解决它？

【参考方案1】：

有点晚，但希望对您有所帮助。

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

接下来，您的编译后的 javascript 必须有一个对 .map 文件的绝对路径引用，该路径引用应该出现在编译后的 js 文件的末尾，如下所示：

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

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

当然这是在你编译的 js 中，所以每次编译 ts 到 js 时都需要重新设置 sourceMappingURL。这很快就会变得令人厌烦。

如果您使用 Gulp（或者可能是其他任务运行器），您可以在编译您的 typescript 的 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 确实会处理 .map 文件的相对路径，但与 SystemJS 结合使用时存在问题。我还没有完全理解这个问题，但你可能想看看这些链接：github.com/systemjs/systemjs/issues/820、bugzilla.mozilla.org/show_bug.cgi?id=1224078、bugzilla.mozilla.org/show_bug.cgi?id=1223439

作为一种解决方法，您可能希望在 tsconfig.json 中将“mapRoot”设置为“localhost:3000/app”。