前言
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.查看事件
这个按钮可以记录时间段内的所有事件提交，应该还有其他功能，但目前为试验出来!
谢谢大家的观看~
网友评论