《技能记录》
性能
辅助工具

chrome开发者工具的使用

# Elements

# 查看元素伪类 css 样式

例如我想查看元素触发 hover 时的 css 样式。先选中该元素，然后按下图操作：

# 临时增删元素 class

# 查看 placeholder 样式

现在可以查看元素的 placeholder 样式了：

# 查看元素绑定事件

鼠标移到 handler 上，可查看具体的函数代码。

# Network

Network主要有5个视窗，分别有不同的功能：

Controls 工具栏：用来控制Network的功能及外观。
Filters 筛选栏：根据筛选条件筛选请求列表，按住command/ctrl键可多选。
Overviews 概览：资源被加载过来的时间线，如果多条时间线垂直堆叠，表示多个资源被并行加载。
Request Table 请求列表：该视窗列出了所有的资源请求，默认按时间顺序排序，点击某个资源，可以查看更详细的信息。
Summary 总览：汇总了请求数量，传输数据大小，加载时间等信息。

# DOMContentLoaded事件/Load事件的区别

DOMContentLoaded事件 页面文档完全加载并解析完毕之后，会触发DOMContentLoaded事件，它在两个地方都有体现：概览视窗的蓝色竖线，总览视窗的触发时间。 Load事件 当所有资源加载完成后触发的，它在三个地方有体现：概览视窗的红色竖线，请求列表视窗的红色竖线，总览视窗的触发时间。

DOMContentLoaded/Load事件

结合DOM文档加载的加载步骤，DOMContentLoaded事件/Load事件触发时机如下：

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。// 部分脚本会阻塞页面的加载
DOM树构建完成。//DOMContentLoaded 事件
加载图片等外部文件。
页面加载完毕。//load 事件

# 显示资源的其他信息

一般 Network 会显示加载资源的详细信息，但它默认只显示部分信息。如果我想查询网页资源是通过 HTTP1.1 还是 HTTP2 加载的，要怎么做呢？

从 GIF 中可以看出，除了 HTTP 协议版本外，还可以查看其他信息，例如 HTTP 请求的方法、域名等等。

# 查看资源请求的上游和下游

按时shift键，鼠标hover在请求上，可以查看请求的上游和下游，如下图所示，hover在common.js上，可以看到有一个绿色请求、一个红色请求。其中绿色请求表示common.js的上游请求，即谁触发了common.js请求，红色请求表示common.js的下游请求，即common.js又触发了什么请求。