Vue Debug调试
source link: https://zhanggq.github.io/post/zgq-paas-vue-debug/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
差不多半年没碰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源码：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK