vue开发调试

1、调试方式

1.1 为什么调试

        当遇到应用逻辑出现错误，但又无法准确定位的时候，同后台项目开发一样，可以在JS实现的应用逻辑中设置断点，并进行单步、进入方法内、跳出方法等调试，从而准确定位问题根源。

1.2 调试方法

本文主要讲两种方式

• debugger方法，浏览器调试。
• 工具调试，如vs code。

        在Vue中如果想要进行调试时，如果是在js中调试的话，可以直接添加一个debugger，然后在浏览器中打开检查进行断点调试。

2、debugger方法

2.1 写debugger

1）在代码需要打断点的位置，写上debugger(如果安装eslint可能报错，这时鼠标移到代码出现小灯泡，点击选第一项忽略即可);

2.2 启动

npm run serve启动，到了断点位置浏览器会停下来;

2.3 调试 

在浏览器里使用步进开始调试。执行新增断点或向下执行等调试操作。

3、 vs code调试

3.1 安装插件

Debugger for Chrome已弃用，请安装JavaScript Debugger

3.2 启动程序

npm run serve启动

3.3 启动调试

3.4 vs code中调试

4、其他方式

• 辅助语句如：console.log()，将需要显示的信息打印到浏览器控制台上。

• Chrome插件：Vue.js devtools