Closure编译器源map =空（Chrome）或错误（Firefox）代码窗口

Question

我在＆＃39; src ＆＃39;中有一组JavaScript文件。 Closure Compiler编译的文件夹在 src / comp ＆＃39; src / comp 中的单个文件 cw-around.js 中生成的源地图 cw-around.js.map 也在＆＃39; src / comp ＆＃39;。

＆＃34; //＃sourceMappingURL = xxx＆＃34;位于已编译文件 cw-around.js 的末尾。 xxx是 cw-around.js.map 的完整HTTP链接（本地Web服务器），并在浏览器中成功测试。 {＆＃34;版本＆＃34;：3，＆＃34;文件＆＃34;：＆＃34;顺式around.js＆＃34;是 cw-around.js.map 文件

的开头

在开发模式/来源文件列表中，我可以看到Chrome和Firefox中的相关文件（当我输入错误的xxx时，我只能看到已编译的 cw-around.js 文件）

当我双击相关文件（ cw-demodata.js ，其中一个包含在编译文件中的JavaScript文件名）时：

1. 在Chrome 58或61中（＆＃34;启用了JavaScript源地图＆＃34; +＆＃34;检测到源地图＆＃34;），一个空代码窗口显示。

2. 在Firefox 54中（＆＃34;显示原始来源＆＃34; +＆＃34; devtools.source-map.locations.enabled; true＆＃34;），显示我的呼叫网页的HTML代码。

出了什么问题？如何调查以找出错误？

Answer 1

我遇到了同样的问题，它来自"version"没有正确设置。在源地图中，有"file"和"sources": []）"sources": ["src/comp/foo.js"]条目，它告诉浏览器在哪里找到实际的源文件（而不是源地图）。 / p>

正如我和您一样，从子文件夹编译资产，子文件夹路径位于此源数组中（即"sources": ["foo.js"]而不是src/comp/foo.js）。浏览器尝试从我的网络服务器请求foo.js，但显然不存在，因为sourceMapLocationMappings直接存在。

解决方法是设置正确的"sources"。使用closure-compiler cli，您可以使用documented执行此操作。使用ant任务，您可以在任务调用中添加--source_map_location_mapping "\"src/comp/foo.js^|foo.js\""。

这会将["foo.js"]调整为直接指向--source_map_location_mapping，然后由您的网络服务器提供，并可由开发工具找到。

修改：根据sourceMapLocaionMapping="src/comp/foo.js|foo.js"

在rxvlan中添加双引号

Answer 2

我找到了解决我的问题的方法：编译js文件并在与js文件相同的目录中生成源映射。相关的js文件现在可以在Chrome和Firefox中正确显示。

以前，在成功打开已编译的js文件和源映射后，似乎浏览器无法找到并加载未编译的js文件。 在控制台中有一条错误消息可以很快发现问题......