Vue Debug调试

摘要

差不多半年没碰Vue，回头再来看发现又差不多都忘了。Git hub上下载了最新的vue-element-admin，从头学起吧。学习的第一步就是Debug。

一、自己的环境说明

我所用的开发环境如下：

• Windows系统（穷人买不起Mac）
• 开发工具使用webstorm
• 调试的代码是vue-element-admin v4.1.0
• Chrome浏览器
• 能够翻墙

二、Webstorm Debug配置

首先需要先将vue-element-admin工程跑起来（此处不详细描述），接着在webstorm新增一个Debug配置，如图：

接着需要打开Chrome浏览器的应用商店（此处需要翻墙），并下载JetBrains IDE Support插件，如图：

顺便需要说明，JetBrains IDE Support插件默认是通过63342端口与webstorm进行通信的，如果同时启动了JetBrains的其它工具（比如Pycharm），有可能63342端口就会被其它工具占用，此时需要检查webstorm当前所用的Debug端口及修改JetBrains IDE Support插件配置。如图：

JetBrains IDE Support插件链接上webstorm之后，在webstorm上运行第一步新增的Debug（注意前提是vue-element-admin工程已经跑起来），此时webstorm会自动打开chrome浏览器，并进入相应的web界面。在浏览器中按F12，选择需要调试的源码，打断点，继续运行，直到代码被断住，此时就可以看见对应webstorm中也被断在了对应的代码上：

三、进一步配置

按照上一步操作，理论上已经可以debug代码了，但实际真正要调式Vue代码时，确发现看不到真正的Vue源码：

所以此时还需要进一步配置vue-devtools。首先上chrome应用商店下载插件：

接着修改webstorm配置

重启Debug后，在chrome上就能看到所需要的vue源码：

以上