最近打算写一写Chrome教程文档，不知道大家最感兴趣的是什么内容呢？
1.如何打开
无论是在Windows还是Mac，都可以使用（FN）+F12键打开Chrome的Network面板。
2.面板组成
如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。
控制器：控制面板的外观与功能
过滤器：过滤请求列表中显示的资源
- 按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
概览：显示HTTP请求、响应的时间轴。
请求列表：默认时间排序，可选择显示列。
概要：请求总数、总数据量、总花费时间等。
3.控制器
模拟慢速网络
还可以自定义，点击Add…
4.过滤器
如何对请求进行过滤呢？
4.1按字符串
1.键入png到过滤文本框。仅显示包含文本的文件png。在这种情况下，与过滤器匹配的唯一文件是PNG图像。
2.类型/.*.[cj]s+$/。DevTools过滤掉任何资源，其文件名不以a j或c后跟1个或多个s字符结尾。
3.类型-main.css。DevTools过滤掉了main.css。如果任何其他文件与模式匹配，它们也将被过滤掉。
4.2按类型
- XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other（此处为列出的任何其他类型）
- 多个类型，按住Command（Mac）或Ctrl（Windows、Linux）
- 按时间过滤：概览面板，拖动滚动条
- 隐藏Data URLs：CSS图片等小文件以 BASE64 格式嵌入HTML中，以减少HTTP请求数。
4.3属性过滤
下面演示使用Filter过滤器，如图所示：
- domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
- has-response-header：显示包含指定HTTP响应标头的资源
- is：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
- Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
- method：显示通过指定 HTTP 方法类型检索的资源
- mime-type：显示指定 MIME 类型的资源
- mixed-content：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
- scheme：显示通过未保护HTTP（scheme:http）或受保护 HTTPS（scheme:https）检索的资源。
- set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
- set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
- set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
- status-code：仅显示 HTTP 状态代码与指定代码匹配的资源。
多属性间通过空格实现 AND 操作。
5.请求列表的排序
- 时间排序，默认
- 按列排序
- 按活动时间排序
- Start Time：发出的第一个请求位于顶部
- Response Time：开始下载的第一个请求位于顶部
- End Time：完成的第一个请求位于顶部
- Total Duration：连接设置时间和请求/响应时间最短的请求位于顶部
- Latency：等待最短响应时间的请求位于顶部
6.请求列表
简单介绍下每列的含义：
Name：资源的名称
Status：HTTP状态代码
Type：请求的资源的MIME类型
Initiator：发起请求的对象或进程。它可能有以下几种值：
- Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
- Redirect（重定向）：HTTP重定向启动了请求
- Script（脚本）：脚本启动了请求
- Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。
Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
Time：总持续时间，从请求的开始到接受响应中的最后一个字节
Waterfall：各请求相关活动的直观分析图
鼠标右键单击，添加其他列：
还可以自定义header头：
7.预览请求内容
如图所示，在请求列表点击以下
功能包括：
- 查看头部，包括请求头、响应头。
- 查看Cookie
- 预览响应正文：查看图像用
- 查看响应正文
- 时间详细分布
- 导出数据为HAR格式
- 查看未压缩的资源大小：Use Large Request Rows
- 浏览器加载时间（概览、概要、请求列表）DOMContentLoaded 事件的颜色设置为蓝色，而load事件设置为红色
- 将请求数据复制到剪贴板
- Copy Link Address：将请求的网址复制到剪贴板
- Copy Response：将响应包体复制到剪贴板
- Copy as cURL：以 cURL 命令形式复制请求
- Copy All as cURL：以一系列 cURL 命令形式复制所有请求
- Copy All as HAR：以 HAR 数据形式复制所有请求
- 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游。
下面演示如何查看请求上下游，首先按住 shift 键，其次移动鼠标到不同请求，如图所示：
8.浏览器加载时间
触发流程：
- 解析 HTML 结构
- 加载外部脚本和样式表文件
- 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
- DOM 树构建完成 // DOMContentLoaded 事件
- 加载图片等外部文件
- 页面加载完毕 // load事件
9.请求时间详细分布
点击请求列表后，找到Timing，看到如图所示的字段
Queueing：浏览器在以下情况下对请求排队
- 存在更高优先级的请求
- 此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1
- 浏览器正在短暂分配磁盘缓存中的空间
Stalled：请求可能会因 Queueing 中描述的任何原因而停止
DNS Lookup：浏览器正在解析请求额IP地址
Proxy Negotiation：浏览器正在与代理服务器协商请求
Request sent：正在发送请求
ServiceWorker Preparation：浏览器正在启动Service Worker
Request to ServiceWorker：正在将请求发送到Service Worker
Waiting（TTFB）：浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte（至第一字节的时间）。此时间包括1次往返延迟时间及服务器准备响应所用的时间
Content Download：浏览器正在接收响应
Receiving Push：浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
Reading Push：浏览器正在读取之前收到的本地数据
10.阻止请求
当某些资源不可用时，页面的外观和行为如何？它完全失败了，还是仍然有些功能？阻止要求查找：
1.按Control+ Shift+ P或 Command+ Shift+ P（Mac）打开命令菜单。
2.键入block，选择“ 显示请求阻止”，然后按Enter。
3.单击添加模式。
4.类型main.css。
5.单击添加。
6.重新加载页面。正如预期的那样，页面的样式有点混乱，因为它的主样式表已被阻止。请注意main.css网络日志中的行。红色文本表示资源已被阻止。
main.css已被封锁
7.取消选中启用请求阻止复选框。
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 engola@qq.com 举报，一经查实，本站将立刻删除。文章链接：https://www.3kemao.com/n/24222.html
相关推荐
-
完全不氪金的手游推荐哪个（分享不肝不氪的良心手游大全）
本期小编将为您介绍什么游戏不肝不氪又耐玩，又能让您长时间坚持下去的游戏。要知道，现在有很多人都是偏向于小玩法的，他们不愿意在玩法上耗费太多的心血和金钱，所以，很多小玩法都是很受欢迎...
-
右眼一直跳是吉是凶（右眼一直跳是“跳灾”吗）
左眼跳财，右眼跳灾”的说法延续了很多年，也让不少人对此深信不疑。奇怪的是“左眼跳财”的说法，并不经常灵验，“右眼跳灾”却总在生活中得到了验证。完全说是迷信，也不能让人信服。到底是什...
-
怎么查看电脑配置的详细参数（电脑硬件配置查看方法汇总）
很多朋友在刚买电脑时都是听销售员说的电脑参数和硬件配置，其实我们也可以自己动手查看自己想要的信息。 这里就分享几个常用的方法： 一、通过电脑的设备管理器查看 1、鼠标右键我的电脑，...
-
怀疑自己闯红灯怎么快速查询（查当天闯红灯被拍到的情况的方法）
近年来，交通安全问题备受关注，红灯闯行行为不仅危害自身安全，还容易引发交通事故。许多司机关心，如果当天因为不慎闯红灯而被拍下，如何查询相关信息呢？本文将为您介绍几种常见的查询方式，...
-
宇宙十大黑洞排名（新的宇宙最大黑洞堪比1960亿太阳）
宇宙中最大的黑洞有多大？很多人都好奇这个问题，就好像想知道最大的恒星有多大一样！ 太阳是太阳系中的统治者，它的质量占了整个太阳系可见物质的99.86%，地球、木星（相当于地球质量的...
-
苹果11用18w快充伤电池吗
苹果11支持最大22.5W的快充，使用18W的快充充电并不会对电池造成伤害，因为苹果的电池充电管理系统会自动限制电流和电压，保证电池充电安全和寿命。 但是，如果长期使用非原装充电器...
-
电脑pdf软件哪个好用（免费转化为PDF的软件推荐）
在日常工作中，PDF可以说是我们使用最多的格式之一了，因为其便携、跨设备、易解析、不会乱排版等特性，有着非常广泛的应用。一般情况下，我们直接用浏览器就可以阅读PDF，但是如果想要更...
-
多娇百变大侦探凶手攻略（百变大侦探剧本杀答案解析）
剧透警告！！！ 答案在最后面！！！ 需要任何百变大侦探剧本杀答案的关注留言，持续更新高分本，新本答案解析！ 只要是你想要的，这里都有！！！ 答案如果有错的地方，记得报错，及时更改！...
-
男方去女方家带什么礼物（第一次去未来丈母娘带礼物推荐）
十里清风百阙情话，难抵你一次的回眸。这大概是所有的情侣热恋期的切身感受吧。世界上有很多人，但我们的一生认识的人算是沧海一粟，更别说相伴一生的人多么可贵。茫茫人海中的相遇注定了两个人...
-
经典抗战片前十 十大抗战电视剧排行榜
1.亮剑 主演：李幼斌、何政军 亮剑，这是经典的抗战作品之一，这部抗战片几乎成为了一代人的记忆，它是很多观众心目中喜欢看的战争片，没有之一，小编每每想起还能会和尚的死而惋惜不已。 ...
