谷歌浏览器开发者工具的使用详解

前端技术教程 专栏收录该内容
6 篇文章 0 订阅

一、基础功能篇

1. elements

在elements中主要分为两大块:

A:HTML结构面板

B:操作dom样式、结构、事件的显示面板

(1)点击箭头选中一个元素,可以在HTML面板中定位到该元素,并且可以在右侧styles面板中查看和编辑该元素的样式,编辑时,效果可以实时更新,这对于前端工程师解决样式问题是个大大的福利,在HTML面板中ctrl+F,可以对html中的内容进行搜索。

在这里插入图片描述

(2)在右侧Computed面板中,可以查看对应元素的盒图和该元素上最终生效的样式(包含继承父级元素的样式和自己的样式)

在这里插入图片描述

(3)Event Listeners面板可以查看对应元素绑定的事件(旧版本谷歌浏览器不太好用,更换选取元素时该面板不会实时更新,只有重新打开审查元素才可以,新版本谷歌浏览器已解决这个问题,可以实时更新)

click是事件名称

handler里面包含事件的回调主体内容

useCapture表示该事件是否向上冒泡

在这里插入图片描述

还有一个方法,如果想要找到一个元素绑定的事件,我喜欢用google浏览器的search all files,搜索元素的id或class,从而找到该元素在js中绑定的事件,如下图:

在这里插入图片描述

(4)在HTML面板中选中一个元素,鼠标右键点击,会看到一个弹窗,里面有若干选项:

在这里插入图片描述

  • Add attribute : 为该元素添加属性

  • Edit attribute:修改该元素的属性

  • Edit as HTML : 编辑该元素(你可以重写它的整个content)甚至修改它的标签名称

  • :active / :hover / :focus / :visited : 点击这四项 元素被激活 / 鼠标滑过 / 获得焦点 / 链接点击之后 四个状态下元素的样式可以在右侧styles中显示

  • Break on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码

针对Break on的示例如下:

在这里插入图片描述

勾选Break on -> Node removal,在B界面切换到DOM Breakpoints 选项,可以看到有注册信息。然后我们点击click me按钮触发删除div3的事件,可以看到浏览器自动为我们定位删除该元素的代码部分,并且停止执行js代码。

2. Network

Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态 。

单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数:

header(表头信息、返回信息、请求基本状态)

Preview(返回的格式化文本信息)

response(返回的原始信息)

Cookies(该请求带的cookies)

Timing(请求时间变化)

在这里插入图片描述

3. Application

Application部分较简单,其中Frames主要向我们展示了本界面所加载的资源列表。还可以看到cookie和local storage 、session storage 等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储 。

在这里插入图片描述

二、进阶篇

1. Sources:谷歌浏览器开发者工具中最有用的面板

Sources面板几乎是前端开发工程师最常用到的功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。

在这里插入图片描述

左侧双击某个js,在右侧的行号上点击进行打断点,上图中的1~6分别代表:

1、停止当前断点调试

2、不跳入函数中去,继续执行下一行代码(F10)

3、跳入函数中去(F11)

4、从执行的函数中跳出

5、禁用所有的断点,不做任何调试

6、程序运行时遇到异常时是否中断的开关

当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,毕竟身为前端码农的你也一定会听到过后台(通常情况下是后台发布)大哥的抱怨:“XXX,测试通过了没,不要出现了哈,发布一次很麻烦的!”。而在谷歌浏览器打断点的文件中直接修改,你就可以验证你的代码在线上是否可行。

在这里插入图片描述

即使在断点时,你也可以编辑代码,按ctrl+S保存之后,你会看到断点区域的背景由白色变为浅色,而断点会重新开始执行 ,此时你就可以验证改的bug是否生效。

2. Audits

Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是网络加载性能,另一类是界面性能。首先打开它的主界面。

在这里插入图片描述

Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。

(1)减少HTTP请求次数

(2)使用CDN(Content Delivery Network,内容分发网络)

(3)增加Expires Header

(4)压缩页面元素

(5)把样式表放在头上

(6)把脚本文件放在底部

(7)避免CSS表达式

(8)把JavaScript和CSS放到外部文件中

(9)减少DNS查询次数

(10)最小化JavaScript代码

(11)避免重定向

(12)删除重复的脚本文件

(13)配置ETags

(14)缓存Ajax

点击run,进行测试

在这里插入图片描述

3. Console

Console面版可以输出你自己代码 ,功能非常强大,详细讲解请 点击这里 查看一位大神的文章。

4. 移动开发模式

点击elements左侧小手机的图标,即可进入移动开发模式,并不能完全模拟出手机的真实情况(比如手机会弹出软键盘,引起兼容问题)

在这里插入图片描述

三、性能篇

一个网站的性能主要关乎两项,一是加载性能、二是执行性能。第一项可以利用Network来分析, 第二项可以利用Timeline来分析。

加载性能分析:

在这里插入图片描述

Request sent(发送请求):发送HTTP请求的时间(从第一个bit到最后一个bit)

Waiting(等待响应):通常是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。

Content Download(下载):下载HTTP响应的时间(包含头部和响应体)

在这里插入图片描述

四、插件篇

1. (FeHelper)WEB前端助手

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值