开发者工具的使用(面向Vue)

2019-07-10 本文已影响0人 _玖柒_

前言

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浏览器 --> 选中右上角选项 --> 更多工具 --> 扩展程序