Firefox未在调试器中显示打字稿（.ts）源地图

我只能看到.js文件，.ts源文件不会出现在Firefox中。Firefox未在调试器中显示打字稿（.ts）源地图

它可以在Chrome中使用，我可以看到并在.ts文件中放置换行符，而调试器的工作效果很好。但是Firefox不会工作，没有版本，不是稳定的或者晚上或者开发者版本。

难道这个功能没有在Mac/OSX上实现吗？如果是这样，网上应该有些东西，但我什么也没找到。显然，这个问题没有被记录在任何地方。

有没有人有这方面的知识，也许如何解决它？

来源

2016-05-23 Kesarion

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

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

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

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

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

当然这是在你编译好的js中，所以每次你把它都编译成js时，你需要重置sourceMappingURL。这很快变得很烦人。

如果您正在使用Gulp（或可能是其他任务运行程序），则可以在编译打字稿的gulp.task中为映射URL设置前缀选项（sourceMappingURLPrefix）。（请参阅https://github.com/floridoo/gulp-sourcemaps）

我编译的.js位于\ dist子文件夹中。不幸的是，前缀选项对子文件夹没有帮助。幸运的是，Gulp可以通过为sourceMappingURLPrefix指定一个函数来处理这个问题。

该函数传递一个对象，该对象具有一个通往编译好的js的路径，所以通过一些字符串操作，您还可以创建路径（.m文件也在同一个文件夹中）。

我一饮而尽生成任务看起来是这样的（见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)); 
});

现在，这产生了sourceMappingURL绝对路径在我的编译JS也可以正确地引用子文件夹，如：/＃sourceMappingURL = http://localhost:9000/dist/customElements/listview.js.map

Firefox正在按预期加载.ts文件和调试器函数。它也在Chrome中工作。

我不是Gulp专家，所以如果有更好的方法，我很想找出答案。

更新：我最近已切换到使用aurelia-cli，到目前为止，我发现远比Gulp + jspm简单。 Chrome浏览器& Chrome无需任何配置即可正确选取.ts文件。

来源

2016-08-10 12:59:43 robs

原则上，Firefox确实处理.map文件的相对路径，但是与SystemJS一起存在一个问题。我还没有完全掌握的问题，但你可能想看看这些链接： https://github.com/systemjs/systemjs/issues/820， https://bugzilla.mozilla.org/show_bug。？CGI ID = 1224078，https://bugzilla.mozilla.org/show_bug.cgi?id=1223439 –

作为一种变通方法，您可能需要设置 “MAPROOT”，以类似的“http：//本地主机：3000 /应用/ “在tsconfig.json中。 –

Firefox未在调试器中显示打字稿（.ts）源地图

回答

相关问题