前言
Vue是目前市场上火热的三大框架之一,其渐进式的使用方式,平滑的学习曲线让很多人投入了Vue的怀抱,本文主要面向刚入坑Vue的萌新们,让大家能在Vue的DeBug过程中快速定位问题,大佬们可略过此文...
多图警告!
多图警告!
多图警告!
开发者工具
开发者工具是浏览器面向开发人员的Web开发和调试工具,默认情况下F12即可唤出,此文以chrome浏览器为例,给大家介绍一下开发者工具的食用方式
这是咱开发者工具的工具栏,下面依次为大家介绍常用的工具,功能以及用法
1.选择箭头
就是工具栏第一个箭头图标的东西,鼠标点击一下就可以使用,或者按快捷键ctrl + shift + c
即可唤出,使用方式就是将它指向左边的Html界面上的元素,例如下图
被指向的元素会显示出该元素基本的Css信息,点击一下,Elements项就能看见选中的元素代码
2.手机图标
第二个按钮用于切换PC模式和手机模式,可在左侧选择系统预设的手机型号,也可自己更改手机分辨率
3.Elements
Elements用于审查Html代码和对应的css属性
左侧为生成的Html代码,在右侧则是选中元素的css样式以及其依赖的父样式,我们可以直接在右边修改样式,例如
margin
padding
之类的可使用小键盘的上下箭头调整值(↑,↓调整值查为1,ctrl+↑↓为100,shift+↑↓为10,alt+↑↓为0.1),具体的还需要大家自己摸索。话说它的颜色调整功能挺好用的,在颜色方块上点击一下即可唤出
下方是该元素所有的css属性 (Computed 选项)
在上方红箭头指向的地方点击,则可跳转到对应css属性生效的地方。例如,该字体有3个地址都有设置,点击此按钮会跳转到最后生效的那一处css属性
4.Network
Network用于我们检查网络请求相关的操作
在这儿我们可以看到每个请求花费的时间,请求类型,请求头,响应头以及响应数据。
5.Source
这应该是第4项的 咱挪到最后面来说,因为它是我们今天的重点!
在平时我们检查BUG的时候,经常需要使用console.log()来打印相应的数据。但是,我们有更好的选择,那就是,使用浏览器的调试功能。
首先,我们使用调试工具时,需要添加断点,让代码能够命中断点,然后停下来。
下面看看打断点的步骤吧!
例如,我们有一个叫做test.js的文件出错了
我们点击一下test.js即可跳转过去,或者切换到 Source 面板,使用
control + o 快捷键查找,输入test.js,也可找到该文件
然后在左侧点击一下,即可打上断点,在断点打好之后,刷新界面,代码在执行到断点处会停下来。
当我们鼠标指上去时,即可查看对象的所有属性与值。
另一种方式就是我们在代码需要断点的地方添加一个关键字
debugger
class test {
constructor() {
this.a = 1;
this.b = 2;
}
show() {
debugger; //此处是断点
console.log(a);
}
}
let t = new test();
t.show();
然后在代码执行到此处时,会自动命中断点
下面是断点调试过程中快捷键
- F8 or Ctrl + : 暂停/继续
- F10 or Ctrl + ': 单步执行
- F11 or Ctrl +;: 单步进入(进入函数内部)
- Shift + F11 or Ctrl + Shift+;: 单步退出
- Ctrl +./Ctrl+, : 上一帧/下一帧
- Ctrl +Shift+E: 被选中代码在控制台中打印出console信息
- Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
- Ctrl + B: 打断点/取消断点
Vue-devtools
Vue-devtools是Vue推出的调试工具,能够查看Vue运行中各种信息!
1. 安装Vue-devtools
https://github.com/vuejs/vue-devtools.git 将代码拉去下来,npm i
安装依赖, npm run build
打包
然后打开Chrome浏览器 --> 选中右上角选项 --> 更多工具 --> 扩展程序
选择加载已解压的扩展程序,然后选择
vue-devtools/shells/chrome
目录,即可添加插件到Chrome此后的Vue项目,就可以看见开发者工具有Vue这个选项了
2.查看组件信息
点击这个图标,就可以查看组件信息,在左侧组件树中选中你想查看的组件,右方即可看到该组件的所有数据信息,包括
props
computed
mapstate
data
3.查看store(Vuex)状态
点击右下角的Load state即可加载store状态
4.查看emit
此面板可查看所有组件的emit信息,包括他的负载
5.查看路由跳转
这个按钮可以查看路由的跳转记录
6.查看事件
这个按钮可以记录时间段内的所有事件提交,应该还有其他功能,但目前为试验出来!
谢谢大家的观看~