我正在使用Closure编译器创建一个Chrome扩展,我想让源代码Map可以用于调试。我可以让源代码Map正常工作,方法是将浏览器直接指向源代码树中的一个页面,并在编译后的javascript文件末尾添加特殊的sourceMappingURL(所有内容都在一个目录中):
debugger;document.getElementById("hello").innerHTML="Hello, world!";
//@ sourceMappingURL=background-compiled.map
但是当我访问同一个脚本作为扩展时,我只能看到编译后的javascript,而不能看到原始源代码。我确实配置了Chrome调试器,在这两种情况下都启用了源代码Map,否则它们都会完全相同地执行,没有任何错误。源代码Map在扩展中不起作用吗?还是我在设置时遗漏了什么?
我试过Chrome 25稳定版和Chrome 27金丝雀版,两者的行为相同。
5条答案
按热度按时间6pp0gazn1#
我遇到了同样的问题,在切换到内联源Map后,一切都工作正常。
原因是,chrome扩展只支持内联源mpas
因此,当您使用Webpack时,只需添加
有一系列可能的选项,请参阅webpack文档here中的表格。
bq8i3lrv2#
我知道我迟到了,但是Chrome确实允许源Map。你可能遇到的问题是,它默认拒绝加载Map。这个问题可以通过将Map添加到
manifest.json
文件的web_accessible_resources
中来解决。ruoxqz4g3#
在providing answers to questions resolved in comments的精神下,Chrome先前不支持在扩展中使用源Map,但这在Chrome 29中得到了纠正。
感谢评论者,@w00kie谁提交和跟踪的bug on Chromium-如果你想收到你的有益努力的声誉,只是张贴自己的答案,我会删除这一个。
vuktfyat4#
Chrome支持一个扩展源Map,无需将其内联或添加到
manifest.json
文件中。Map文件分配在“开发人员工具”下“源”选项卡中的“内容脚本”选项卡下。
有一个所有启用的扩展的源代码,加上
webpack://
文件(如果源Map是用Webpack创建的)。也可以使用Cmd + P查找Map文件。
jdg4fx2g5#
与之前的文章相反,我发现为了让源Map能够为内容脚本工作,实际上必须在
manifest.json
中将它们列入白名单,如下所示: