12

我正在使用 Closure 编译器创建一个 Chrome 扩展，并且我想让源映射用于调试。通过将浏览器直接指向我的源代码树中的一个页面，我可以让源映射正常工作，并将特殊的 sourceMappingURL 添加到已编译的 javascript 文件的末尾（所有内容都在一个目录中）：

debugger;document.getElementById("hello").innerHTML="Hello, world!";
//@ sourceMappingURL=background-compiled.map

但是当我作为扩展访问相同的脚本时，我只能看到已编译的 javascript 而不是原始源。我确实将 Chrome 调试器配置为在这两种情况下都启用源映射，否则它们都执行相同而没有错误。源映射是否不能在扩展中工作，或者我在设置时缺少什么？

我已经尝试过 Chrome 25 stable 和 Chrome 27 canary，两者的行为相同。

4

4 回答 4

11

我遇到了同样的问题，切换到内联源映射后，一切正常。

原因是，chrome 扩展只支持内联源 mpas

所以，当你使用 webpack 时，只需添加

devtool: "inline-source-map"

有一系列可能的选项，请参阅此处的 webpack 文档中的表格。

于 2020-03-03T17:44:50.040 回答
8

我知道我迟到了，但 Chrome 确实允许源映射。您可能遇到的问题是它默认拒绝加载地图。这可以通过将地图添加到 web_accessible_resources文件中manifest.json来解决。

于 2013-12-10T16:31:19.590 回答
4

本着为评论中解决的问题提供答案的精神，Chrome 以前不支持在扩展程序中使用源映射，但自 Chrome 29 起已纠正。

感谢评论者@w00kie，他提交并跟踪了Chromium 上的错误- 如果您希望因您的帮助而获得声誉，只需发布​​您自己的答案，我将删除此答案。

于 2014-05-02T23:13:31.857 回答
2

Chrome 支持开箱即用的扩展源映射。无需将它们内联或将它们添加到web_accessible_resources您的manifest.json文件中。

映射文件分配在开发人员工具下“源”选项卡内的“内容脚本”选项卡下。

有所有启用的扩展的源代码，加上webpack://文件（如果源映射是用 Webpack 创建的）。

也可以使用 Cmd + P 查找映射文件。

Chrome 扩展源地图

于 2020-06-01T23:18:44.367 回答