美文网首页
开发者工具的使用(面向Vue)

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

作者: _玖柒_ | 来源:发表于2019-07-10 16:46 被阅读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浏览器 --> 选中右上角选项 --> 更多工具 --> 扩展程序


选择加载已解压的扩展程序,然后选择vue-devtools/shells/chrome目录,即可添加插件到Chrome
此后的Vue项目,就可以看见开发者工具有Vue这个选项了

2.查看组件信息
点击这个图标,就可以查看组件信息,在左侧组件树中选中你想查看的组件,右方即可看到该组件的所有数据信息,包括props computed mapstate data

3.查看store(Vuex)状态


点击右下角的Load state即可加载store状态

4.查看emit
此面板可查看所有组件的emit信息,包括他的负载

5.查看路由跳转
这个按钮可以查看路由的跳转记录


6.查看事件
这个按钮可以记录时间段内的所有事件提交,应该还有其他功能,但目前为试验出来!

谢谢大家的观看~

相关文章

网友评论

      本文标题:开发者工具的使用(面向Vue)

      本文链接:https://www.haomeiwen.com/subject/lajhkctx.html