如何调试minify过的js文件

用webpack开发js项目,生产环境和开发环境一般会使用两套配置,其中一个明显的区别就是对调试的支持。

js的代码调试主流做法就是使用sourcemap

webpack通过配置参数devtool来控制sourcemap的几种行为,开发环境一般配个inline-source-map就够用了,生产环境改成false就不会生成sourcemap了。

然鹅,总有些情况奇葩情况,开发环境好好的,生产环境就是跪了,日志看半天看不出什么名堂,这个时候你最希望的就是能直接断点调生产环境的代码了。

但是缺少了sourcemap,被压缩过的js根本不是给人看的,比如这个样子的:
minified-js

幸亏右击chrome菜单,发现一个神奇的选项:
chrome-add-source-map-menu

试了一下果然可以,而且这个sorucemap支持任意路径,如下形式都是支持的:

  • file:///User/XXX/hash.js.map
  • http://localhost:3000/hash.js.map
  • http://yourdomain.com/hash.js.map

所以接下里的解决方案就比较明显了,生产环境也生产sourcemap,只不过这个文件不显示的嵌入js或者html里面。

webpack支持这种模式的sourcemap,只要把devtool的值改成hidden-source-map

之后借助gulp之类的任务工具把生成的sourcemap静态文件放在server某个地方,client需要使用的时候chrome右击添加就可以调试了,简直爽歪歪。