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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
angular4自定义组件详解
Sep 28 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
JavaScript门道之标准库
May 26 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 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中使用BigMap实例
2015/03/30 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python线程、进程和协程详解
2016/07/19 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
傲盾软件面试题
2015/08/17 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
linux面试题参考答案(9)
2016/01/29 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
2014年迎新年活动方案
2014/02/19 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
新教师教学工作总结
2015/08/14 职场文书
Python find()、rfind()方法及作用
2022/12/24 Python