gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:51:06 25 4
gpt4 key购买 nike

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

它适用于 Chrome,我可以在 .ts 文件中查看和放置换行符,并且调试器运行良好。但是 Firefox 不能工作,没有版本,不是稳定版、夜间版或开发版。

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

有没有人对此有任何了解,也许如何解决?

最佳答案

有点晚,但希望有帮助。

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

接下来,你编译的 javascript 必须有一个绝对路径引用到你的 .map 文件,路径引用应该出现在你编译的 js 文件的末尾,看起来像这样:

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

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

当然,这是在你编译的 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 文件。

关于macos - Firefox 未在调试器中显示 typescript (.ts) 源映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37390087/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com