我的 Closure 编译的源映射有啥问题?
Posted
技术标签:
【中文标题】我的 Closure 编译的源映射有啥问题?【英文标题】:What's wrong with my Closure compiled sourcemap?我的 Closure 编译的源映射有什么问题? 【发布时间】:2014-03-22 11:37:17 【问题描述】:我按照here 的描述使用 Closure 编译了一个小测试:
使用java -jar compiler.jar --js test.js --create_source_map ./test-min.js.map --source_map_format=V3 --js_output_file test-min.js
我有:
html:
<html>
<body>
<canvas id="doodle" ></canvas>
<script src="test-min.js"></script>
</body>
</html>
JS test-min.js:
(function()for(var b=document.getElementById("doodle").getContext("2d"),a=0;100>a;a++)b.fillStyle="rgb(200,0,0,0.1",b.fillRect(10*a,10,55,50*a),b.fillStyle="rgba(0, 0, 200, 0.1)",b.fillRect(30,30*a,55,50*a))();
//# sourceMappingURL=test-min.js.map
JS test-min.js.map:
"version":3,
"file":"test-min.js",
"lineCount":1,
"mappings":"AAAC,SAAQ,EAAG,CAEV,IADD,IAAIA,EAAMC,QAAAC,eAAA,CAAwB,QAAxB,CAAAC,WAAA,CAA6C,IAA7C,CAAV,CACUC,EAAE,CAAX,CAAgB,GAAhB,CAAcA,CAAd,CAAqBA,CAAA,EAArB,CACCJ,CAAAK,UAIA,CAJgB,iBAIhB,CAHAL,CAAAM,SAAA,CAAc,EAAd,CAAiBF,CAAjB,CAAoB,EAApB,CAAwB,EAAxB,CAA4B,EAA5B,CAA+BA,CAA/B,CAGA,CADAJ,CAAAK,UACA,CADgB,sBAChB,CAAAL,CAAAM,SAAA,CAAc,EAAd,CAAkB,EAAlB,CAAqBF,CAArB,CAAwB,EAAxB,CAA4B,EAA5B,CAA+BA,CAA/B,CAPS,CAAX,CAAA;",
"sources":["test.js"],
"names":["ctx","document","getElementById","getContext","i","fillStyle","fillRect"]
都在同一个文件夹中。但是,Firefox 和 Chrome 开发工具都不会显示源映射中的未编译源。是我做错了什么,还是这是最新的 Closure 编译器中的错误?
【问题讨论】:
【参考方案1】:这些文件对我来说看起来不错,我刚刚使用最新的 Closure Compiler 进行了尝试,没有出现任何问题。由于您没有在问题中提及这两件事,因此您应该验证以下内容:
确保原始 .js 文件 test.js 位于同一目录中。源映射告诉浏览器如何将压缩/编译文件中的行映射到原始源——但它仍然需要原始源。
确保启用 javascript 源映射支持。在 Chrome 中,在设置中的 Sources 下查找 JavaScript source map support。在 Firefox 中,选中调试器选项中的“显示原始源代码”。
如果您设置了这些东西,它应该可以正常工作。请注意,如果您进入源面板并单击 min.js
文件,您仍然可以看到缩小文件的内容。但是,如果您在 non-minified 文件中设置断点,它应该可以正常工作。
同样,如果您的代码中有异常(并且您打开了异常中断),当您进入调试器时,它应该显示异常发生在非缩小代码中的位置.
另见:
Source Maps 在 Chrome DevTools 文档中。 Use a source map 在 Firefox 开发者工具文档中。希望这会有所帮助。
【讨论】:
所以它也需要原始js文件?这不是作弊吗? 您是否希望所有来源都在源映射中编码? 是的 - 为什么在 devtools 只是从查看/使用缩小版切换到完整版时使用 .map? Chrome 正在为 everyone 运行缩小版。因此,您的所有用户都可以获得较小下载量的优势。如果您使用 DevTools(或其他支持源映射的调试器)调试页面,它也会拉取源映射和文件的完整版本。它仍在运行缩小后的代码,但在完整版中会向您显示断点等。 在源映射中包含源为implemented in 2017。以上是关于我的 Closure 编译的源映射有啥问题?的主要内容,如果未能解决你的问题,请参考以下文章
GWT 2.7:-XjsInteropMode JS 和 -XjsInteropMode CLOSURE 有啥区别?