打包编译的js代码如何调试

Question

如图,问下前端大神们这种工程化的前端文件如何进行断点调试, 文件都是打包编译的

Answer 1

这种其实也可以调试的，方法如下：

然后代码就被格式化为如下了

如果这个被拆分的js文件刚好是你的xx.vue文件的话，你只要搜索对应的关键字就行了，比如我这里要在vue的created钩子那断点，就搜索created

这个时候就完成了断点。

强调一下：因为现在通常的前端脚手架都会将页面按功能进行js文件拆分和内容混淆，但是这个对于语法关键字，内容字符串和模板函数名不会进行处理，所以你可以搜索“核心关键字”定位代码位置就行。

Answer 2

在源代码，也就是你编辑器里写的代码，需要调试的地方，加一个 debugger 就行了。

Answer 3

不过一般开发中和发布中脚本文件的处理不完全一样吧，开发中的脚本文件不经过混淆压缩，这样就可以直接断点调试。

调试完全通过后才输出发布版本，这时再添加混淆压缩的处理。