源代码映射对Chrome扩展程序有效吗？

Question

我正在使用Closure编译器创建Chrome扩展程序，希望通过源映射进行调试。只需将特殊的sourceMappingURL添加到编译后的javascript文件的结尾，并将浏览器直接指向源树中的页面即可轻松实现源映射（所有内容都在单个目录中）。请注意保留HTML标签。

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

但是当我作为扩展访问同样的脚本时，我只能看到编译后的JavaScript而不是原始源代码。我已经在两种情况下都配置了Chrome调试器以启用源映射，并且除此之外，它们执行相同且没有错误。源映射在扩展中不起作用还是我在设置方面遗漏了什么？

我已经尝试过Chrome 25稳定版和Chrome 27金丝雀版，在两者中都有相同的行为。

- rhashimoto

---

我得出了一个相同的结论，即源代码映射在扩展中无法使用。我在Chromium项目上发布了一个问题链接：https://code.google.com/p/chromium/issues/detail?id=212374 - w00kie

感谢确认并发布错误！ - rhashimoto

好的，我会尽力进行翻译。似乎已经在 Chromium 主干中修复了此问题，并将包含在 Chrome 29 中。 - w00kie

Answer 1

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

原因是Chrome扩展程序仅支持内联源映射。

所以当您使用Webpack时，请添加：

devtool: "inline-source-map"

有多种选项可供选择，请参阅webpack文档中的表格此处。

- Ruderer

---

对于 Rollup：sourcemap: 'inline' - ElliotYoYo

Answer 2

我知道我来晚了，但是Chrome确实支持源代码映射。你可能遇到的问题是它默认不加载映射文件。可以通过将映射文件添加到manifest.json文件中的web_accessible_resources来解决此问题。

- Stephen Collins

---

正如注释所述，扩展程序中缺乏对源映射的支持，在Chrome 29中已得到修复。 - rhashimoto

Answer 3

为了提供在评论中解决问题的答案，Chrome之前不支持扩展中使用源映射，但自Chrome 29以来已经得到纠正。

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

- rhashimoto

Answer 4

Chrome支持直接使用扩展源映射，无需将它们内联或将其添加到manifest.json文件的web_accessible_resources中。

分配的映射文件位于"开发者工具"下方的"源代码(Sources)"选项卡中的"内容脚本(Content scripts)"选项卡内。

此处包含所有启用的扩展程序的源代码以及webpack://文件（如果使用Webpack创建了源映射）。

您还可以使用Cmd + P查找映射的文件。

- Nik Sumeiko

Answer 5

与之前的帖子相矛盾，我发现为了使源映射在内容脚本中起作用，实际上必须在manifest.json中将它们列入白名单，如下所示：

"web_accessible_resources": [
    {
        "resources": [
            "*.map"
        ],
        "matches": [
            ...
        ]
    }
]

- Soeren

---

谢谢，我没有想到那个。 :) - Fareed Alnamrouti

谢谢，我没想到那个！:) - Fareed Alnamrouti