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


前言

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


谢谢大家的观看~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容