源地图是否适用于 Chrome 扩展程序？答案

【问题标题】：Do source maps work for Chrome extensions?源地图是否适用于 Chrome 扩展程序？
【发布时间】：2013-02-26 19:48:11
【问题描述】：

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

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

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

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

【问题讨论】：

我得出了同样的结论，即源映射在扩展中不起作用。我在 Chromium 项目上发布了一个问题：code.google.com/p/chromium/issues/detail?id=212374
感谢您确认并发布错误！
它似乎已经在 Chromium trunk 中修复，将包含在 Chrome 29 中

【解决方案1】：

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

原因是，chrome 扩展只支持 inline source mpas

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

devtool: "inline-source-map"

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

本着 providing answers to questions resolved in comments 的精神，Chrome 以前不支持在扩展程序中使用源映射，但在 Chrome 29 中已得到纠正。

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：