vue sourcemap详解

从webpack开始

直接进入正题。有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。我们先从一般情况开始说。

-sourcemap

webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。

devtool: '#source-map'

然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择: 戳这里

这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章

官方默认的是用 ‘#cheap-module-eval-source-map’

devtool: '#cheap-module-eval-source-map'

设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。

或者，直接找到对应的文件。在chrome用 ’ctrl(command) + p‘，输入文件名，可以找到对应的源代码。

打断点：

需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。

原文： https://blog.csdn.net/liyijun4114/article/details/73863228

多模式解释：https://segmentfault.com/a/1190000004280859