Chrome 控制台使用手册专栏【五】Network Panel

wangsd
10,036 阅读18分钟

Network 面板记录页面所有网络请求。可以查看网页显示所需资源，包括 CSS、JavaScript 和 HTML 文件以及图像。除此之外，可以查看页面所有的XHR请求，记录xhr请求的详细信息。

默认情况下，只要打开 DevTools，Network 面板中就会记录所有网络请求。

image.png

以下将根据面板的布局介绍对应的功能

顶部工具栏

主要用来控制网络记录的行为

image.png

开始/停止记录网络请求

通过点击图标进行状态切换。

  • image.png：红色图标。表示启用记录网络请求，如果页面有新的网络请求，可以在请求列表中找到请求记录

  • image.png：灰色图标。表示停止记录网络请求，如果页面有新的网络请求，请求列表上不会有请求记录。

如果从停止记录状态转为开始记录状态后，请求列表也不会有停止记录状态这一段时间的请求记录。

清除请求记录

点击 image.png 清除请求列表记录

image.png

请求搜索过滤工具

image.png

点击 image.png 展示/隐藏 过滤栏，通过过滤栏对请求记录进行过滤展示

image.png

点击 image.png 弹出搜索侧边栏，支持输入对整个请求信息进行模糊匹配，搜索方位更强大。

image.png

搜索工具栏，image.png大小写匹配、模糊匹配；image.png刷新、清空功能

image.png

刷新页面保留请求记录

通过勾选 Preserve log 复选框控制开启/关闭

image.png

  • 勾选。开启保留请求记录。开启保留，如果刷新页面，刷新之前的请求记录会保留在请求列表上，然后页面重新加载后的请求记录会接在后面。

  • 取消勾选。关闭保留请求记录，刷新页面后会先清空原来的请求记录，只显示页面重新加载后的请求记录

禁用浏览器缓存

通过勾选 Disabled cache 复选框控制开启/关闭

image.png

禁用浏览器缓存可以用来模拟用户首次访问

除此之外，也可以从 More tools->Network conditions 打开面板禁用浏览器缓存

image.png

如需要手动清除缓存，鼠标右击请求列表任意位置弹出菜单，选择Clear brower cache

image.png

同操作，如需要手动清除cookie，鼠标右击请求列表任意位置弹出菜单，选择Clear brower cookie

网络模拟

模拟当前的网络环境如离线模式、4G网络、3G网络等，测试页面在各网络环境下的运行情况。如要测试PWA离线模式下Service worker的工作情况就很有用。

默认网络环境未设置No throttling，点击展开下拉

image.png

  • Disabled 禁用
    • No Throttling 默认
  • Presets 预设
    • Fast 3G 开启快速3g模式
    • Slow 3G 开启慢速3g模式
    • Offine 开启离线模式
  • Custom 自定义环境
    • [custom preset] 自定义预设环境
    • Add 点击展开新建环境

除此之外，也可以从 More tools->Network conditions 打开面板修改网络环境

image.png

如果进行预设，Network显示警告图标提示已进行预设

image.png

例如未设置Slot 3G，查看请求总时间 image.png

设置Slot 3G，查看请求总时间，明显速度变慢 image.png

点击Custom->Add，自定义网络限速模式，输入自定义名称（Profile Name）、下载速度（Download）、上传速度（Upload）以及延迟（Latency）

image.png

点击Add custom profile... 添加新的自定义网络环境，鼠标悬浮已自定义行，支持修改、删除

image.png

image.png

添加后，Network->No throttling选项列表同步选项，可以选择自定义选项

image.png

只能模拟比当前实际慢的网络环境，你懂得

导入/导出HAR文件

image.png

  • 导出

image.png 将所有网络请求保存到 HAR 文件 并导出。

或者右击请求列表任意位置，弹出菜单选择Save all as HAR with content 导出请求列表所有内容。（包含被过滤的请求）

image.png

  • 导入

image.png 导入 HAR 文件 到DevTools分析请求。

或者直接拖拽 HAR 文件 到请求列表直接导入即可。

设置

点击image.png打开设置面板，可以额外控制面板信息展示

image.png

设置-捕获页面加载期间的屏幕截图

勾选 Capture screenshots 启用屏幕截图。捕获屏幕截图可以分析用户在等待您的页面加载时看到的内容。

勾选后需要重新加载页面

image.png

重新加载后，会记录页面加载的屏幕截图，缩略图列表展示。

image.png

配合时间线，鼠标悬浮一张截图的缩略图，可以在时间线查看截图的截取点，高亮竖线对应展示。

image.png

单击缩略图，以过滤掉在捕获屏幕截图后发生的任何请求，时间线也会同步选中范围。

image.png

双击缩略图，放大缩略图展示

image.png

设置-请求记录大图标展示（优化展示）

勾选 Use large request rows 使用大图标展示请求列表

  • 取消勾选，请求列表信息字体小号展示，展示更多条请求记录

image.png

  • 勾选，请求列表信息字体大号展示，展示记录更多信息

image.png

设置-根据iframe分组请求（优化展示）

勾选 Group by frame 开启请求列表分组展示

插入一个<iframe src="//www.runoob.com">

image.png

设置-展示时间线（默认展示）

勾选 Show overview 展示时间线概览

image.png

可以在时间线上选择一段时间，请求列表会自动过滤在选中时间段内的请求。

左键单击一下或者按住左键拖拽选中一部分，左键双击取消选择。直接用滚轮滚动也可以根据鼠标所在位置选中一部分。

image.png

过滤栏Filters

image.png

  • Input 文本输入框：默认忽略大小写模糊匹配请求地址。可以通过用空格分隔每个属性来同时使用多个属性。例如 mime-type:image/gif larger-than:1K。支持属性：
    • cookie-domain. 显示设置特定cookie 域的资源。
    • cookie-name. 显示设置特定cookie 名称的资源。
    • cookie-path. 显示设置特定cookie 路径的资源。
    • cookie-value. 显示设置特定cookie 值的资源。
    • domain. 仅显示来自指定域的资源。您可以使用通配符 ( *) 来包含多个域。例如，*.com显示来自所有以 .com 结尾的域名的资源。
    • has-response-header. 显示包含指定 HTTP 响应标头的资源。
    • is. 用于is:running查找WebSocket资源。
    • larger-than. 显示大于指定大小的资源，以字节为单位。设置 的值1000相当于设置 的值1k。
    • method. 显示通过指定 HTTP 方法类型检索的资源。
    • mime-type. 显示指定 MIME 类型的资源。
    • mixed-content. 显示所有混合内容资源 ( mixed-content:all) 或仅显示当前显示的资源 ( mixed-content:displayed)。
    • priority. 显示优先级与指定值匹配的资源。
    • resource-type. 显示资源类型的资源，例如图像。
    • scheme. scheme:http过滤HTTP请求，scheme:https过滤HTTPS请求。
    • set-cookie-domain. 显示具有与指定值匹配的属性的Set-Cookie请求头的资源。
    • set-cookie-name. 显示具有Set-Cookie名称且与指定值匹配的请求头的资源。
    • set-cookie-value. 显示具有Set-Cookie且与指定值匹配的请求头的资源。
    • status-code. 仅显示其 HTTP 状态代码与指定代码匹配的资源。
    • url. 显示与url指定值匹配的资源。 文本框输入属性会自动提示支持属性列表，同时各别属性会提供选项下拉框供选择过滤

支持过滤属性列表image.png

属性值列表image.png

  • Invert：反转过滤。配合input属性过滤。例如：input输入 status-code:400，过滤所有状态码为400的请求；勾选 Invert，过滤除状态码为404的其他所有请求。

input输入 status-code:400 过滤 image.png

勾选 Invert image.png

  • Hide data URLs：隐藏所有Data URL。Data URL是嵌入到其他文档中的小文件。在请求表中任何以data:开头的请求都是Data URL。

image.png

  • All 全部类型。按照请求资源类型过滤
    • Fetch/XHR
    • JS
    • CSS
    • Img
    • Media
    • Font
    • Doc
    • WS
    • Wasm
    • Manifest
    • Other

需要选中多个，先按`Command(Mac)/Ctrl(Win)，在点击类型
image.png

  • Has blocked cookies：过滤带有 response bolcked cookies 的请求。request blocked cookies 默认被隐藏，response blocked cookies 会展示，查看请求详情Cookie面板查看请求关联的cookie。 Debug why a cookie was blocked 

勾选查看 request blocked cookies image.png

  • Blocked Requests：过滤被 block 的请求。右击请求列表弹窗菜单，选择 Block request URL/Block request domain 开启阻断请求。再次请求接口会有一条Block request请求记录。

block请求
image.png

blocked 请求记录
image.png

  • 3rd-party requests：过滤第三方请求。

请求列表

image.png

列表字段信息

image.png

Requests 表默认显示以下列：

  • Name 名称。资源的文件名或标识符。
  • Status 状态。HTTP 状态码。
  • Type 资源类型。请求资源的 MIME 类型。
  • Initiator 发起。以下对象或进程可以发起请求：
    • Parser 解析器。Chrome 的 HTML 解析器。
    • Redirect 重定向。HTTP 重定向。
    • Script 脚本。一个 JavaScript 函数。
    • Other 其他。其他一些过程或操作，例如通过链接导航到页面或在地址栏中输入 URL。
  • Size 大小。响应标头和响应正文的组合大小，由服务器提供。
  • Time。从请求开始到收到响应中的最后一个字节的总持续时间。
  • waterfall 请求活动瀑布图。每个请求活动的可视化图形。

允许拖拽表头改变表头列宽，通过右击表头弹出菜单，选择 Reset Columns 恢复初始列框。

添加/删除列字段

右击任一表头（Waterfall除外）弹出菜单，并从可选列字段选项中选择一个选项以隐藏或显示该字段。勾选图标表示当前显示的列字段。如果从请求列表右击弹出菜单，需要鼠标悬浮 Header Options 才能设置展示列字段。

右击表头

image.png

右击请求列表

image.png

推荐：勾选Method、Protocol

自定义列（响应报文头部信息）

右击任一表头（Waterfall除外）弹出菜单，并选择Response Headers > Manage Header Columns。

image.png

输入自定义列

image.png

添加后默认选中展示，也可以从Response Headers控制隐藏或显示

image.png

允许对自定义列进行修改、删除

image.png

Waterfall 列

使用 Waterfall 来查看请求之间的请求时间。默认情况下，瀑布按请求的Start Time 开始时间进行排序。所以，更靠左的请求比靠右的请求更早开始。（但响应结束时间不一定是最早）

可以用Start Time 开始时间顺序，检测接口的调用顺序是否正确（接口允许并发）。

可以用Start Time 开始时间，End Time 结束时间顺序，检测关联接口的调用顺序是否正确（接口之间需要同步调用，一个接口调用后才能发起另一个接口调用）。

列表排序

默认情况下，请求表中的请求按启动时间排序，但是可以使用其他条件对表进行排序。

  • 按表头进行排序。点击请求列表任意表头，则列表按表头进行排序。也可以右击列表任意位置（表头（Waterfall除外）或者列表）弹出菜单，鼠标悬浮 Sort By，然后选择其中一个表头字段选项则按照选中表头进行排序。只能按照一列排序。

image.png

  • 按活动阶段排序。更改 Waterfall 对请求的排序方式，请右击任一表头（Waterfall除外）弹出菜单，鼠标悬浮Waterfall选项，然后选择以下选项之一：

  • Start Time 开始时间。发起的第一个请求位于顶部。

  • Response Time 响应时间。开始下载的第一个请求位于顶部。

  • End Time 结束时间。完成的第一个请求位于顶部。

  • Total Duration 总时长。具有最短连接设置和请求/响应的请求位于顶部。

  • Latency 延迟。等待响应时间最短的请求位于顶部。

image.png

列表操作

除了以上相关的操作之外，请求列表还支持：

查看请求详情

点击任意请求，会切换面板能够查看请求详情

image.png

鼠标悬浮 Waterfall 字段的瀑布图（缩略图），会展示具体的请求活动时间明细。

image.png

查看文件资源

鼠标悬浮Initiator列字段，能够追踪相关调用Script脚本的文件资源。

image.png

点击字段会自动追踪到Sources面板的资源文件。也可以从弹出的调用脚本进行跳转。

其他操作

  • 打开新标签页查看请求：双击请求（Name字段），或者右击请求弹出菜单，选择Open in new tab 在浏览器新tab页打开资源。如果是文件资源（Get请求）能够按浏览器默认行为展示，其他请求可能不行。

image.png

  • 复制请求相关信息：右击请求弹出菜单，鼠标悬浮Copy选项，进行请求复制选项

image.png

  • 重放请求（Replay XHR）：右击请求弹出菜单，选择Replay XHR选项，重放请求。不是所有请求都有此选项，

image.png

请求详情

点击请求列表的一条请求（Name字段），会展示请求详细信息

image.png

点击x 图标关闭详情展示。

查看Websocket连接（Frame）

点击Websocket请求，在详情面板选择Frametab，查看Websocket连接近100条消息记录。重新点击Websocket请求刷新Frametab中消息记录。

image.png

Websocket消息记录表字段：

  • Data 数据。消息有效负载（Websocket数据）。如果消息是纯文本，则会在此处显示。对于二进制操作码，此列显示操作码的名称和编码。支持以下操作码：Continuation Frame（连续帧）, Binary Frame（二进制帧）, Connection Close Frame（连接关闭帧）, Ping Frame（Ping 帧）, and Pong Frame（Pong 帧）。
  • Length 长度。消息有效负载的长度，以字节为单位（数据大小）。
  • Time 时间。接收或发送消息的时间。

消息根据其类型进行颜色编码：

  • light-green（浅绿色）：传出的短信。
  • white（白色）：收到的短信。
  • light-yellow（浅黄色）：WebSocket 操作码。
  • light-red（浅红色）：错误。

查看Header请求头信息（Header)

点击一条请求，在详情面板选择Headertab，查看接口请求的Request Headers 请求头/Response Headers响应头内容，以及请求的General基本信息。此类信息都存在报文头部。

image.png

  • General 信息：主要展示请求地址（address）、请求方式（method）、请求状态（status）、远程ip:端口等。例如Referrer-Policy
  • Response Header 展示响应报文头部字段内容。
  • Request Header 展示请求报文头部字段内容。

如果展示 Provisional headers，Request headers显示警告信息：

image.png

  • 这可能是由于请求未通过网络发送（从本地缓存提供），它不存储原始请求标头。在这种情况下，您可以Disabled cache 禁用缓存以查看完整的请求标头。

  • 也可能是请求无效的网络资源（例如fetch("https://jec.fyi.com/unknown-url/")在控制台中尝试）。由于安全原因，DevTools 也可能只显示临时标题。

查看请求载荷（Payload）（有些版本没有此tab，内容在Headers->Payload 折叠行

点击一条请求，在详情面板选择Payloadtab，查看接口请求所传的接口参数。包括Request Payload（request body 内容）、（Query String Parameters（url parameters）、Form data（form 表单）

请求记录示例【一】

image.png

请求记录示例【二】

image.png

对于Payload数据，能够查看数据实际在请求报文的格式内容。点击 View source/View parsed 切换格式查看。

image.png

对于Url String Parameters，还提供查看URL编码，点击View decoded/View URL-encoded 进行URI编码/解码查看

View URI-encoded 编码查看

image.png

View decoded 解码查看

image.png

查看Response响应body（Preview)

点击一条请求，在详情面板选择Previewtab，能够预览响应body的内容，如果是json文本会自动格式化，方便查看字段，在日常开发中非常方便实用。

image.png

使用Preview可以方便的预览图片资源以及css、js文件资源（当然也可以双击请求或者Open in new tab打开新tab预览。

预览css文件资源（自动格式化）

image.png

预览图片资源

image.png

查看Response响应body（Response)

Response tab内容与Preview tab内容基本一致。差异主要有：

  • Json字符串格式化，Preview会格式化body，而Response保留字符串格式（可以手动格式化）

Response tab内容展示

image.png

Preview tab内容展示

image.png

  • css、js资源预览差异 Response tab展示原文件内容，Preview tab会先格式化后展示（image.png 自动高亮）

  • 图片资源预览差异 Response tab无内容，Preview tab能够预览图片。除MIME图片类型以外base64格式（data URL）的图片也是如此。

查看请求活动时间（Timing)

点击一条请求，在详情面板选择Timingtab，展示请求活动各阶段的用时。同Watefull列字段展示内容（悬浮弹窗）

image.png

展示信息：

  • Queued at 加入队列时间

  • Started at 开始执行时间

  • Queueing 进入执行队列所用时间。浏览器在以下情况下将请求排队：

    • 有更高优先级的请求。
    • 已经为此源打开了六个 TCP 连接，这是限制。仅适用于 HTTP/1.0 和 HTTP/1.1。
    • 浏览器在磁盘缓存中短暂分配空间

  • Stalled 被阻塞 请求可能因Queueing中任务而被阻塞的时间。

  • DNS Lookup DNS解析 浏览器解析请求的 IP 地址所用的时间。

  • Initial Connection 初始建立连接 浏览器建立连接的时间，包括 TCP 握手/重试和协商 SSL。

  • Proxy negotiation 代理协商 浏览器正在与代理服务器协商请求所用的时间

  • Request sent 请求发送 发送请求所用的时间。

  • ServiceWorker Preparation 浏览器正在启动 service worker的时间。

  • Request to ServiceWorker 请求发送给service worker的时间。

  • Waiting（TTFB） 浏览器等待响应的第一个字节的时间。TTFB 代表第一个字节的时间。此时间包括 1 次往返延迟和服务器准备响应所用的时间。【通常用来衡量接口响应速度-接口快慢】

  • Content Download 浏览器直接从服务器或service worker接收响应的时间。该值是读取响应正文所花费的总时间。大于预期值可能表示网络速度较慢，或者浏览器正忙于执行其他工作，这会延迟读取响应。

  • Receiving Push 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。

  • Reading Push 浏览器正在读取之前收到的本地数据。

查看调用详情（Initiator）

点击一条请求，在详情面板选择Initiatortab，查看请求发起的相关进程（脚本），用来排查调用js代码是否正常很有用（分析call stack js调用栈的顺序）。

请求相关js堆栈

image.png

请求调用链

image.png

直接点击资源可以跳转到Sources面板查看对于调用逻辑

image.png

查看接口相关Cookies（Cookies）

点击一条请求，在详情面板选择Cookiestab，能够查看请求涉及的所有Cookie内容，包括请求、响应。

image.png

show filtered out request cookies 展示请求头使用blocked 的 cookie信息（黄色背景展示）。鼠标悬浮信息图标展示具体blocked信息。

请求其他信息

总请求数

请求列表底部栏记录total requests

image.png

注意： 此数字仅跟踪自 DevTools 打开以来已记录的请求。如果在打开 DevTools 之前发生了其他请求，则不计算这些请求。**

总下载资源大小

请求列表底部栏记录total download size

image.png

注意： 此数字仅跟踪自 DevTools 打开以来已记录的请求。如果在打开 DevTools 之前发生了其他请求，则不计算这些请求。

总资源大小（未压缩）

请求列表底部栏记录total resources size

image.png

注意： 此数字仅跟踪自 DevTools 打开以来已记录的请求。如果在打开 DevTools 之前发生了其他请求，则不计算这些请求。

查看资源未压缩的大小

使用 large request rows，查看Size列字段，下一行数字为未压缩大小。（鼠标悬浮查看title描述）

image.png

查看加载事件

请求列表底部栏记录DOMContentLoaded事件和load事件的时间。DOMContentLoaded事件为蓝色，load事件为红色。

image.png

相关功能使用补充

阻塞请求

除了直接在请求列表右击菜单中选择Block 请求

image.png

通过菜单直接打开Network request blocking工具面板

image.png

还可以使用命令行输入 Show Network request blocking

image.png

Network request blocking工具面板展示

image.png

点击 + 号添加拦截请求规则，支持正则表达式

image.png

点击Add保存，拦截生效，Reload一下页面查看效果

image.png

image.png

勾选Enable network request blocking 开启/关闭列表拦截规则

image.png

点击 image.png 删除所有请求拦截规则

单条拦截规则允许修改/删除 image.png

avatar
文章
阅读
粉丝