vue sourcemap详解

Posted on 2018-08-29 11:54  金-Fish  阅读(3782)  评论(0编辑  收藏  举报

从webpack开始

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

-sourcemap

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

devtool: '#source-map'

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

devtool介绍

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

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

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

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

debugger

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

command+p

打断点:

断点

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

 

 

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

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