标签: source-maps

JavaScript 的源映射似乎通常不比令牌粒度更细。例如，身份映射使用令牌粒度。

我知道我看过其他例子，但不记得在哪里。

为什么我们不使用基于 AST 节点的粒度呢？也就是说，如果我们的源映射有所有位置并且只有 AST 节点的开始，那会有什么缺点？

在我的理解中，源映射用于崩溃堆栈解码和调试：永远不会有错误位置或有用的断点不在某个 AST 节点的开头，对吧？

更新 1

一些进一步的澄清：

• 该问题与 AST 已知的情况有关。因此，“生成 AST 比生成令牌数组更昂贵”无法回答这个问题。

• 这个问题的实际影响是，如果我们可以在保留调试器和崩溃堆栈解码器行为的同时降低源映射的粒度，那么源映射可能会小得多。主要优点是调试器的性能：开发工具可能需要很长时间来处理大型源文件，使调试变得痛苦。

• 以下是使用source-map库在令牌级别添加源地图位置的示例：

for (const token of tokens) {
    generator.addMapping({
      source: "source.js",
      original: token.location(),
      generated: generated.get(token).location(),
    });
}

这是在 AST 节点级别添加位置的示例：

for (const node of nodes) {
    generator.addMapping({
      source: "source.js",
      original: node.location(),
      generated: generated.get(node).location(),
    });
}

更新 2

Q1：为什么期望 AST 节点的启动次数少于令牌的启动次数？

A1：因为如果 AST 节点的起始数多于令牌的起始数，那么将会有一个以非令牌开始的 AST 节点。对于解析器的作者来说，这将是一个相当大的成就！为了具体说明，假设您有以下 JavaScript 语句：

const a = function *() { return a …

在谷歌浏览器中,已经有JS和CSS,CoffeeScript等的源图,而Paul Irish只是使用源图来演示SASS.

这是一种将开发源文件映射到浏览器中的编译结果以允许导航回源的技术.

那么,现在有HTML的源图吗？像Jade,Slim这样的语言真的需要这样的功能,以便人们可以更容易地调试它们.

我最近通过haxe语言中的源代码调试发现了chrome 中源代码映射的存在.它允许在Chrome浏览器中调试生成的javascript,同时查看原始源代码中的错误原因.

有没有人写过coffeescript /是coffeescript源可映射的源地图生成器？

它将有助于调试coffeescript生成的javascript.

我在Chrome Dev 27上,并在Dev Tools设置中选中了Disable cache.当我重新加载页面时,Chrome会正确地重新加载地图页面使用的所有资源,包括.js文件.但是,它不会自动重新加载相应的源映射 .map.监控Chrome我的应用之间的HTTP流量,在后续页面加载时,我没有看到Chrome对.map文件的任何请求.如何让Chrome重新加载源地图？

Chrome没有重新加载.map文件的问题是它也不会重新加载生成文件的文件.js,在我的情况下恰好是CoffeeScript文件(.coffee),这意味着在调试时,在Sources选项卡中我正在寻找在旧版本的.coffee文件中,即使新代码(来自.js)正在运行.

背景:我正在将2个依赖的TypeScript文件编译为js,它使用tsc 1.0生成源映射(每个文件一个源映射)

我正在使用-m commonjs然后使用browserify生成单个bundle.js

但是我注意到我在bundle中得到了两次原始的源映射引用,这似乎不起作用.

传球--debug似乎也没有成功.

我有一个感觉这个问题:https://github.com/substack/node-browserify/issues/325有点相关,但我无法弄清楚问题是如何解决的.

另外建议使用https://github.com/substack/browser-pack,但我还是不完全了解如何使用它,它是否取代了browserify？

最重要的是,我想合并2个js文件,但是使用browserify将js"合并"到ts源地图.那可能吗？

我可以使用以下内容将源Type映射成功编译为单个JS文件:

tsc --sourcemap --out app.js app.ts

我还可以使用UglifyJS成功缩小输出,同时保持源映射的完整性:

uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js

但是,我想稍微进一步.我想将我编译的TypeScript代码(app.js)与几个第三方JS库合并到一个缩小的文件中,该文件维护源映射指向原始TypeScript(对于我的代码)或JavaScript(对于第三方库).

我尝试过类似的东西,基本上只是将一个JS库文件添加到UglifyJS的输入中:

uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js

不幸的是,这似乎不起作用.它确实将所有内容成功合并到一个文件中,并且似乎保留了TypeScript代码的源映射.但是当我输入错误时lib/javascript-library.js,浏览器中的JS控制台(使用源映射)说错误出现在我的一个TypeScript文件中,这显然是错误的.

我是一个TypeScript newb,我无法想象我是第一个想要将TS输出与随机JS库结合在一个带有源映射的缩小文件中的人,但我找不到任何人在谈论它.也许我的方法完全错了？

编辑:我用Chromium打开了一个新问题.

我们的项目使用编译为JavaScript的TypeScript.在Karma中调试自动单元测试时,我想禁用JavaScript源映射并坚持调试已编译的代码.我知道如何从浏览器设置执行此操作,但是当我关闭浏览器时更改将会过期.(如果你来到这里寻找用户界面设置,这里的问题就回答了.)

Chrome 从命令行接受其他标志(例如--no-sandbox).是否有标志或类似方法来禁用源地图？

我有一个 Typescript 项目，启动方式如下：

ts-node-dev  --preserve-symlinks --inspect=0.0.0.0  -- src/server.ts

我可以使用 Visual Studio Code 对其进行调试，但调试器在错误的行处中断。我能想到的唯一合理的解释是 ts-node-dev 没有将调试器指向源映射（在那里）。

如何正确调试 ts-node-dev 执行的 Typescript 代码？

我想调试生产网站,但我不想在服务器上上传地图文件(出于隐私原因,因为它是公共的吗？).

可能吗 ？

如标题所示:Firefox中的Chrome的DevTools'工作空间'是否相同？

如果不是 - 如果我的源js和scss文件在webroot之外,我还能如何使用源映射？我可以直接将更改保存到文件系统吗？