vscode调试Vue的过程&坑总结

1、在vscode的插件市场安装debugger for chrome插件

对于云桌面开发，插件版本不对的可以观看这篇文章blog.csdn.net/u012814856/…安装与window版本对应的插件即可。

安装完重载加载

2、配置vscode调试模块

先启动你的vue项目

然后启动调试

vscode会帮你重新启动一个浏览器，界面如下：

如果运行调试界面的时候报一些奇怪的错误，不要怀疑，直接换另一个版本的debugger for chrome插件

4、调试代码

上图是个简单的Vue的数据驱动demo，输入框里是1，然后点击increase按钮，那么p标签的内容就变成2。

我们在浏览器上按f12，然后打开sources模块，点击index文件，出现的就是我们的代码文件内容，点击第22行，打下断点。然后点击increase按钮，就会出现如下情况，即断点调试。

5、总结

学习源码，调试是必备武器了。