关闭编译器源映射 = 空 (Chrome) 或错误 (Firefox) 代码窗口答案

【问题标题】：Closure compiler source map = empty (Chrome) or wrong (Firefox) code window关闭编译器源映射 = 空 (Chrome) 或错误 (Firefox) 代码窗口
【发布时间】：2017-11-06 23:09:32
【问题描述】：

我在 'src' 文件夹中有一组 JavaScript 文件，这些文件由 Closure Compiler 在 'src/comp 中的单个文件 cw-around.js 中编译' 以及生成的源映射 cw-around.js.map 也在 'src/comp' 中。

“//# sourceMappingURL=xxx”在编译文件cw-around.js的末尾。 xxx 是到 cw-around.js.map 的完整 HTTP 链接（本地 Web 服务器），并在浏览器中成功测试。 {"version":3,"file":"cw-around.js" 是 cw-around.js.map 文件的开头

在Dev mode/sources文件列表中，我可以看到Chrome和Firefox中的相关文件（当我放错xxx时，我只能看到编译好的cw-around.js文件） .

在那里，当我双击关联文件（cw-demodata.js，包含在编译文件中的 JavaScript 文件名之一）时：

在 Chrome 58 或 61（“启用 JavaScript 源映射”+“检测到源映射”），显示一个空代码窗口。
在 Firefox 54 ("show original sources" + "devtools.source-map.locations.enabled;true")，我的调用网页的 HTML 代码是显示。

怎么了？如何调查以确定问题所在？

【问题讨论】：

听起来像是浏览器的错误，但无法看到或重现它，无法确定。
3 种不同浏览器中的相同错误？似乎不太可能
你的描述对于每个浏览器来说听起来不同，不一样。
您使用的是什么操作系统？请制作您正在做什么的屏幕电影并将其添加到您的问题中。在 Windows 或 OSX 中，您可以使用 LICEcap。
我使用的是 Windows 10，我在说明中添加了 2 个屏幕截图

标签： javascript google-chrome-devtools google-closure-compiler source-maps firefox-developer-tools

【解决方案1】：

我刚刚遇到了同样的问题，它来自 sourceMapLocationMappings 未正确设置。在源映射中，（与"version" 和"file" 一起）有一个"sources": [] 条目，它告诉浏览器在哪里可以找到实际的源文件（不是源映射）。

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

解决方案是设置正确的sourceMapLocationMappings。使用闭包编译器 cli，您可以使用 --source_map_location_mapping "\"src/comp/foo.js^|foo.js\"" 执行此操作。使用 ant 任务，您将 sourceMapLocaionMapping="src/comp/foo.js|foo.js" 添加到任务调用中。

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

编辑：根据http://stackoverflow.com/a/29542669在--source_map_location_mapping中添加双引号

【讨论】：

【解决方案2】：

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

之前成功打开编译好的js文件和源码图后，浏览器好像无法找到和加载非编译好的js文件。如果能在控制台中显示错误消息以快速发现问题，那就太好了……

【讨论】：