如何正确的使用 Chrome 的控制台 - Network 面板

在 windows 下使用 F12 打开控制台
在 macos 下使用 Command+Option+I 打开控制台（黑苹果同样可以使用 F12）

认识 Network 面板

阻止使用缓存

显示前一个页面的请求

在我们使用控制台调试web应用时经常会观察在跳转页面前浏览器发送了那些请求完成了什么操作。但是通常浏览器在完成页面跳转时会重新刷新请求列表。

自定义请求网络

模拟不同网络情况下的请求。

过滤器

属性
domain: 仅显示来自指定域的资源。你可以使用通配符字符(*)纳入多个域
has-response-header: 显示包含指定 HTTP 相应头的资源
is: 使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
larger-than: 显示大于指定大小的资源(以字节为单位)。将值设为 1000 等同于 1kb
method: 显示通过指定 HTTP 方法类型检索的资源(POST/GET)
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 操作

自定义请求列表

在我们前后端分离的项目开发中，经常会在请求中加入 token 。但是一个页面不可以只做一次请求。我们要在成百上千的请求中找到那些带有 token 请求头的就很麻烦。

查看请求的上下游

那个请求是由那个请求引发的，又引发了那些请求。（在请求列表按住 shift 键，鼠标放在任意请求（不用点击!!!）。红色是下游即这个请求引发了那些请求。绿色是上游即是那个请求引发了这个请求）

查看请求时间分布

Queueing: 浏览器在以下情况下对请求排队
1. 存在更高优先级的请求
2. 此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1
3. 浏览器正在短暂分配磁盘缓存中的空间
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: 浏览器正在读取之前收到的本地数据

简述 Headers

---

扩展内容
github
个人博客