Vue程序调试的方法

 更新时间:2019年06月17日 08:55:51   作者:JerryMouseLi  
这篇文章主要介绍了VUE程序调试的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下

1.写本文的背景

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

2.调试与测试

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

3.Console调试法

3.1 添加console.log指令

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

3.2 调出温度界面如下

3.3 Google浏览器的Console窗口

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


3.4 console.error输出

将代码改成Error输出如下


3.5 浏览器输出

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


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

4.alert 调试法

4.1 alert方法代码

4.2 alert提示效果

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

5 断点调试法

5.1 设置断点

设置断点debugger如下图


5.2 运行代码

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


5.3 输入关心的属性

5.3.1 Watch中观察数据

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


5.3.2 Console中观察数据

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


5.4 输入想要执行的方法

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

5.4.1 写一个调试方法output()

5.4.2 设置断点并运行程序

详见5.1,5.2

5.4.3 执行方法运行程序

可观察到执行结果如下。


总结

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

相关文章

  • 10个Vue3中常用的组合式 API用法详解

    10个Vue3中常用的组合式 API用法详解

    通过Vue 3,组合式API增强了我们利用Vue的能力,使我们的代码更具模块性和可读性,本文主要来和大家分享10个常用的Vue3组合式API,希望对大家有所帮助
    2024-01-01
  • Vue获取input值的四种常用方法

    Vue获取input值的四种常用方法

    Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下
    2023-09-09
  • 如何实现双向绑定mvvm的原理实现

    如何实现双向绑定mvvm的原理实现

    这篇文章主要介绍了vue双向数据绑定原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue使用高德地图选点定位搜索定位功能实现

    Vue使用高德地图选点定位搜索定位功能实现

    这篇文章主要介绍了Vue使用高德地图选点定位搜索定位功能,文中给大家提到了常见问题解决方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • 开发Vue树形组件的示例代码

    开发Vue树形组件的示例代码

    本篇文章主要介绍了开发Vue树形组件的示例代码,它展现了组件的递归使用。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 基于vue2.0的活动倒计时组件countdown(附源码下载)

    基于vue2.0的活动倒计时组件countdown(附源码下载)

    这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数。这篇文章主要介绍了基于vue2.0的活动倒计时组件countdown,需要的朋友可以参考下
    2018-10-10
  • Nuxt 项目性能优化调研分析

    Nuxt 项目性能优化调研分析

    这篇文章主要介绍了Nuxt 项目性能优化调研分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue接入ts基本方法

    vue接入ts基本方法

    这篇文章主要介绍了vue接入ts基本方法,关于ts,也出了很久,下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法,也算是一个初级尝试,简单梳理下基础的接入配置和已经遇到的问题,供需要的小伙伴们参考
    2022-01-01
  • 解决vue-cli webpack打包开启Gzip 报错问题

    解决vue-cli webpack打包开启Gzip 报错问题

    这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue3+Element Plus的项目搭建过程详解

    Vue3+Element Plus的项目搭建过程详解

    这篇文章主要为大家介绍了Vue3+Element Plus的项目搭建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论