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程序调试的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-06-16

vue开发调试神器vue-devtools使用详解

前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插件 GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址:http://npm.taobao.org/ 命令行安装npm淘宝镜像: $ npm install -g cnpm --registry=https://

vue+Java后端进行调试时解决跨域问题的方式

今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http

webstrom Debug 调试vue项目的方法步骤

第一种,使用vue插件 1.下载插件:https://www.jb51.net/softs/588080.html 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开能看见当前vue页面渲染相关数据 第二种,使用webstrom调试下载插件 下载地址:https://www.jb51.net/softs/171905.html 打开webstrom Debugger, 记住端口号 打开刚才安装的插件,选项,填入刚才看见的端口号 添加一个debug

Vue调试神器vue-devtools安装方法

什么是vue-devtools? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装方式 1.chrome商店直接安装: vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了.不过要注意的一点就是,需要翻墙才能下载. 2.手动安装: 第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools g

VUE 配置vue-devtools调试工具及安装方法

1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令. 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图: 3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件.

浅析Visual Studio Code断点调试Vue

很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体.个人还是更加习惯于断点调试.这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值. 设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS C

浅谈vue+webpack项目调试方法步骤

题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候. 从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说. -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件

利用webstrom调试Vue.js单页面程序的方法教程

前言 使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack 构建的应用程序 webstrom 版本:2017.1 代码:使用 vue-cli 构建的基础单页面应用 修改 webpack 配置 由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图 修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js module.exports = merge(bas

Vue.js 单页面多路由区域操作的实例详解

单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

vue.js单页面应用实例的简单实现

一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

vue.js实现刷新当前页面的方法教程

前言 Vue.js(是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,是一种数据驱动的前端框架 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面.基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能. 开发工具环境 vue.js webstorm 方法如下 一.原理 如上图所示,我

vue.js多页面开发环境搭建过程

利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的.如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法. 如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程.  一.创建单页面 vue.js 项目 这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请

Vue&nbsp;SPA单页面的应用和对比

目录 一.什么是SPA 二.SPA和MPA的区别 三.单页应用的优缺点 四.怎么解决SPA首屏加载速度慢 1.什么是首屏加载 2.加载慢的原因 3.解决方案 一.什么是SPA SPA(single-page-application)就是单页应用. 它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTML.JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间

angular.js + require.js构建模块化单页面应用的方法步骤

前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧. AngularJS描述: angularjs是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HT

新手vue构建单页面应用实例代码

本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载

WebApi+Bootstrap+KnockoutJs打造单页面程序

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

vue cli2.0单页面title修改方法

一.npm install vue-wechat-title --save  执行命令 二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],