Vue程序调试的方法


Posted in Javascript onJune 17, 2019

1.写本文的背景

因为程序的调试非常重要,程序猿可以利用好的调试方法去查找定位自己的问题所在之处。从而,达到纠正自己程序错误的地方,健壮自己的程序,让问题变得越来越少,程序变得越来越健康。故作此文,而且日后会将实用的调试程序方法不断进行迭代更新。

2.调试与测试

调式与测试实际有异曲同工之妙,只不过对象不同。测试面向的是产品级,系统级;而调试往往是程序里的某一部分,某个方法,某个属性或者对象。最终效果也很类似,好的测试人员,测试方案可以将产品系统的问题解决在摇篮中;好的调试方法也会让你对程序的运行理解很深刻,对问题的查找定位变得很容易,让软件运行得更稳定。

3.Console调试法

3.1 添加console.log指令

在代码中添加console.log()方法,这里例子输出从数据库读回来的最高最低温,详见如下:

Vue程序调试的方法

3.2 调出温度界面如下

Vue程序调试的方法

3.3 Google浏览器的Console窗口

在Google浏览器中按F12,调出Console窗口如下。

Vue程序调试的方法

3.4 console.error输出

将代码改成Error输出如下

Vue程序调试的方法

3.5 浏览器输出

则浏览器的Console输出会变成红色如下。

Vue程序调试的方法

如果输出的是一个JS对象或者数组,则需要用JSON.stringify方法将其转换成json数组再输出,如下
console.log(JSON.stringify(resolve));

4.alert 调试法

4.1 alert方法代码

Vue程序调试的方法

4.2 alert提示效果

Vue程序调试的方法

备注:alert方法为阻塞式,点击确定之后,前端代码才会继续运行

5 断点调试法

5.1 设置断点

设置断点debugger如下图

Vue程序调试的方法

5.2 运行代码

则运行代码之后,代码会自动跳到断点,停止运行如下

Vue程序调试的方法

5.3 输入关心的属性

5.3.1 Watch中观察数据

Watch中点“+”,然后点击回车即可,看到对应数据的值。

Vue程序调试的方法

5.3.2 Console中观察数据

F12选择浏览器Console窗口,输入需要观察的变量名,点击回车,即可看到其对应值。

Vue程序调试的方法

5.4 输入想要执行的方法

在断点设置,停止运行后,断点之前的方法可在Console窗口中运行输出。

5.4.1 写一个调试方法output()

Vue程序调试的方法

5.4.2 设置断点并运行程序

详见5.1,5.2

5.4.3 执行方法运行程序

可观察到执行结果如下。

Vue程序调试的方法

总结

以上所述是小编给大家介绍的Vue程序调试的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 #Javascript
javascript实现日历效果
Jun 17 #Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 #Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 #Javascript
vue+element加入签名效果(移动端可用)
Jun 17 #Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 #Javascript
最简单的vue消息提示全局组件的方法
Jun 16 #Javascript
You might like
PHP访问Google Search API的方法
2015/03/05 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
原生JS轮播图插件
2017/02/09 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Python实现结构体代码实例
2020/02/10 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python实现一个优先级队列的方法
2020/07/31 Python
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
超市营业员岗位职责
2013/12/20 职场文书
精彩的广告词
2014/03/19 职场文书
党员三严三实心得体会
2014/10/13 职场文书
母亲去世追悼词
2015/06/23 职场文书
大学运动会通讯稿
2015/07/18 职场文书
网络营销实训总结
2015/08/03 职场文书
python 实现的截屏工具
2021/05/08 Python
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技