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