Network 面板记录页面所有网络请求。可以查看网页显示所需资源,包括 CSS、JavaScript 和 HTML 文件以及图像。除此之外,可以查看页面所有的XHR请求,记录xhr请求的详细信息。
默认情况下,只要打开 DevTools,Network 面板中就会记录所有网络请求。
以下将根据面板的布局介绍对应的功能
顶部工具栏
主要用来控制网络记录的行为
开始/停止记录网络请求
通过点击图标进行状态切换。
-
:红色图标。表示启用记录网络请求,如果页面有新的网络请求,可以在请求列表中找到请求记录
-
:灰色图标。表示停止记录网络请求,如果页面有新的网络请求,请求列表上不会有请求记录。
如果从停止记录状态转为开始记录状态后,请求列表也不会有停止记录状态这一段时间的请求记录。
清除请求记录
点击 清除请求列表记录
请求搜索过滤工具
点击 展示/隐藏 过滤栏,通过过滤栏对请求记录进行过滤展示
点击 弹出搜索侧边栏,支持输入对整个请求信息进行模糊匹配,搜索方位更强大。
搜索工具栏,大小写匹配、模糊匹配;刷新、清空功能
刷新页面保留请求记录
通过勾选 Preserve log
复选框控制开启/关闭
-
勾选。开启保留请求记录。开启保留,如果刷新页面,刷新之前的请求记录会保留在请求列表上,然后页面重新加载后的请求记录会接在后面。
-
取消勾选。关闭保留请求记录,刷新页面后会先清空原来的请求记录,只显示页面重新加载后的请求记录
禁用浏览器缓存
通过勾选 Disabled cache
复选框控制开启/关闭
禁用浏览器缓存可以用来模拟用户首次访问
除此之外,也可以从 More tools->Network conditions 打开面板禁用浏览器缓存
如需要手动清除缓存,鼠标右击请求列表任意位置弹出菜单,选择Clear brower cache
同操作,如需要手动清除cookie,鼠标右击请求列表任意位置弹出菜单,选择Clear brower cookie
网络模拟
模拟当前的网络环境如离线模式、4G网络、3G网络等,测试页面在各网络环境下的运行情况。如要测试PWA离线模式下Service worker的工作情况就很有用。
默认网络环境未设置No throttling
,点击展开下拉
- Disabled 禁用
- No Throttling 默认
- Presets 预设
- Fast 3G 开启快速3g模式
- Slow 3G 开启慢速3g模式
- Offine 开启离线模式
- Custom 自定义环境
- [custom preset] 自定义预设环境
- Add 点击展开新建环境
除此之外,也可以从 More tools->Network conditions 打开面板修改网络环境
如果进行预设,Network显示警告图标提示已进行预设
例如未设置Slot 3G
,查看请求总时间
设置Slot 3G
,查看请求总时间,明显速度变慢
点击Custom->Add
,自定义网络限速模式,输入自定义名称(Profile Name)、下载速度(Download)、上传速度(Upload)以及延迟(Latency)
点击Add custom profile...
添加新的自定义网络环境,鼠标悬浮已自定义行,支持修改、删除
添加后,Network->No throttling选项列表同步选项,可以选择自定义选项
只能模拟比当前实际慢的网络环境,你懂得
导入/导出HAR文件
- 导出
将所有网络请求保存到 HAR 文件 并导出。
或者右击请求列表任意位置,弹出菜单选择Save all as HAR with content
导出请求列表所有内容。(包含被过滤的请求)
- 导入
导入 HAR 文件 到DevTools分析请求。
或者直接拖拽 HAR 文件 到请求列表直接导入即可。
设置
点击打开设置面板,可以额外控制面板信息展示
设置-捕获页面加载期间的屏幕截图
勾选 Capture screenshots
启用屏幕截图。捕获屏幕截图可以分析用户在等待您的页面加载时看到的内容。
勾选后需要重新加载页面
重新加载后,会记录页面加载的屏幕截图,缩略图列表展示。
配合时间线,鼠标悬浮一张截图的缩略图,可以在时间线查看截图的截取点,高亮竖线对应展示。
单击缩略图,以过滤掉在捕获屏幕截图后发生的任何请求,时间线也会同步选中范围。
双击缩略图,放大缩略图展示
设置-请求记录大图标展示(优化展示)
勾选 Use large request rows
使用大图标展示请求列表
- 取消勾选,请求列表信息字体小号展示,展示更多条请求记录
- 勾选,请求列表信息字体大号展示,展示记录更多信息
设置-根据iframe分组请求(优化展示)
勾选 Group by frame
开启请求列表分组展示
插入一个<iframe src="//www.runoob.com">
设置-展示时间线(默认展示)
勾选 Show overview
展示时间线概览
可以在时间线上选择一段时间,请求列表会自动过滤在选中时间段内的请求。
左键单击一下或者按住左键拖拽选中一部分,左键双击取消选择。直接用滚轮滚动也可以根据鼠标所在位置选中一部分。
过滤栏Filters
- 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
指定值匹配的资源。 文本框输入属性会自动提示支持属性列表,同时各别属性会提供选项下拉框供选择过滤
支持过滤属性列表
属性值列表
- Invert:反转过滤。配合input属性过滤。例如:input输入
status-code:400
,过滤所有状态码为400的请求;勾选 Invert,过滤除状态码为404的其他所有请求。
input输入 status-code:400
过滤
勾选 Invert
- Hide data URLs:隐藏所有Data URL。Data URL是嵌入到其他文档中的小文件。在请求表中任何以
data:
开头的请求都是Data URL。
- All 全部类型。按照请求资源类型过滤
- Fetch/XHR
- JS
- CSS
- Img
- Media
- Font
- Doc
- WS
- Wasm
- Manifest
- Other
需要选中多个,先按`Command(Mac)/Ctrl(Win),在点击类型
- Has blocked cookies:过滤带有
response bolcked cookies
的请求。request blocked cookies
默认被隐藏,response blocked cookies
会展示,查看请求详情Cookie
面板查看请求关联的cookie。 Debug why a cookie was blocked
勾选查看 request blocked cookies
- Blocked Requests:过滤被 block 的请求。右击请求列表弹窗菜单,选择
Block request URL
/Block request domain
开启阻断请求。再次请求接口会有一条Block request请求记录。
block请求
blocked 请求记录
- 3rd-party requests:过滤第三方请求。
请求列表
列表字段信息
Requests 表默认显示以下列:
- Name 名称。资源的文件名或标识符。
- Status 状态。HTTP 状态码。
- Type 资源类型。请求资源的 MIME 类型。
- Initiator 发起。以下对象或进程可以发起请求:
- Parser 解析器。Chrome 的 HTML 解析器。
- Redirect 重定向。HTTP 重定向。
- Script 脚本。一个 JavaScript 函数。
- Other 其他。其他一些过程或操作,例如通过链接导航到页面或在地址栏中输入 URL。
- Size 大小。响应标头和响应正文的组合大小,由服务器提供。
- Time。从请求开始到收到响应中的最后一个字节的总持续时间。
- waterfall 请求活动瀑布图。每个请求活动的可视化图形。
允许拖拽表头改变表头列宽,通过右击表头弹出菜单,选择 Reset Columns
恢复初始列框。
添加/删除列字段
右击任一表头(Waterfall除外)弹出菜单,并从可选列字段选项中选择一个选项以隐藏或显示该字段。勾选图标表示当前显示的列字段。如果从请求列表右击弹出菜单,需要鼠标悬浮 Header Options 才能设置展示列字段。
右击表头
右击请求列表
推荐:勾选Method、Protocol
自定义列(响应报文头部信息)
右击任一表头(Waterfall除外)弹出菜单,并选择Response Headers > Manage Header Columns。
输入自定义列
添加后默认选中展示,也可以从Response Headers控制隐藏或显示
允许对自定义列进行修改、删除
Waterfall 列
使用 Waterfall 来查看请求之间的请求时间。默认情况下,瀑布按请求的Start Time 开始时间进行排序。所以,更靠左的请求比靠右的请求更早开始。(但响应结束时间不一定是最早)
可以用Start Time 开始时间顺序,检测接口的调用顺序是否正确(接口允许并发)。
可以用Start Time 开始时间,End Time 结束时间顺序,检测关联接口的调用顺序是否正确(接口之间需要同步调用,一个接口调用后才能发起另一个接口调用)。
列表排序
默认情况下,请求表中的请求按启动时间排序,但是可以使用其他条件对表进行排序。
- 按表头进行排序。点击请求列表任意表头,则列表按表头进行排序。也可以右击列表任意位置(表头(Waterfall除外)或者列表)弹出菜单,鼠标悬浮
Sort By
,然后选择其中一个表头字段选项则按照选中表头进行排序。只能按照一列排序。
-
按活动阶段排序。更改 Waterfall 对请求的排序方式,请右击任一表头(Waterfall除外)弹出菜单,鼠标悬浮Waterfall选项,然后选择以下选项之一:
-
Start Time 开始时间。发起的第一个请求位于顶部。
-
Response Time 响应时间。开始下载的第一个请求位于顶部。
-
End Time 结束时间。完成的第一个请求位于顶部。
-
Total Duration 总时长。具有最短连接设置和请求/响应的请求位于顶部。
-
Latency 延迟。等待响应时间最短的请求位于顶部。
列表操作
除了以上相关的操作之外,请求列表还支持:
查看请求详情
点击任意请求,会切换面板能够查看请求详情
鼠标悬浮 Waterfall 字段的瀑布图(缩略图),会展示具体的请求活动时间明细。
查看文件资源
鼠标悬浮Initiator列字段,能够追踪相关调用Script脚本的文件资源。
点击字段会自动追踪到Sources面板的资源文件。也可以从弹出的调用脚本进行跳转。
其他操作
- 打开新标签页查看请求:双击请求(Name字段),或者右击请求弹出菜单,选择
Open in new tab
在浏览器新tab页打开资源。如果是文件资源(Get请求)能够按浏览器默认行为展示,其他请求可能不行。
- 复制请求相关信息:右击请求弹出菜单,鼠标悬浮
Copy
选项,进行请求复制选项
- 重放请求(Replay XHR):右击请求弹出菜单,选择
Replay XHR
选项,重放请求。不是所有请求都有此选项,
请求详情
点击请求列表的一条请求(Name字段),会展示请求详细信息
点击x 图标关闭详情展示。
查看Websocket连接(Frame)
点击Websocket请求,在详情面板选择Frametab,查看Websocket连接近100条消息记录。重新点击Websocket请求刷新Frametab中消息记录。
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基本信息。此类信息都存在报文头部。
- General 信息:主要展示请求地址(address)、请求方式(method)、请求状态(status)、远程ip:端口等。例如Referrer-Policy
- Response Header 展示响应报文头部字段内容。
- Request Header 展示请求报文头部字段内容。
如果展示 Provisional headers,Request headers显示警告信息:
-
这可能是由于请求未通过网络发送(从本地缓存提供),它不存储原始请求标头。在这种情况下,您可以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 表单)
请求记录示例【一】
请求记录示例【二】
对于Payload数据,能够查看数据实际在请求报文的格式内容。点击 View source
/View parsed
切换格式查看。
对于Url String Parameters,还提供查看URL编码,点击View decoded
/View URL-encoded
进行URI编码/解码查看
View URI-encoded
编码查看
View decoded
解码查看
查看Response响应body(Preview)
点击一条请求,在详情面板选择Previewtab,能够预览响应body的内容,如果是json文本会自动格式化,方便查看字段,在日常开发中非常方便实用。
使用Preview可以方便的预览图片资源以及css、js文件资源(当然也可以双击请求或者Open in new tab打开新tab预览。
预览css文件资源(自动格式化)
预览图片资源
查看Response响应body(Response)
Response tab内容与Preview tab内容基本一致。差异主要有:
- Json字符串格式化,Preview会格式化body,而Response保留字符串格式(可以手动格式化)
Response tab内容展示
Preview tab内容展示
-
css、js资源预览差异 Response tab展示原文件内容,Preview tab会先格式化后展示( 自动高亮)
-
图片资源预览差异 Response tab无内容,Preview tab能够预览图片。除MIME图片类型以外base64格式(data URL)的图片也是如此。
查看请求活动时间(Timing)
点击一条请求,在详情面板选择Timingtab,展示请求活动各阶段的用时。同Watefull列字段展示内容(悬浮弹窗)
展示信息:
-
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堆栈
请求调用链
直接点击资源可以跳转到Sources面板查看对于调用逻辑
查看接口相关Cookies(Cookies)
点击一条请求,在详情面板选择Cookiestab,能够查看请求涉及的所有Cookie内容,包括请求、响应。
show filtered out request cookies 展示请求头使用blocked 的 cookie信息(黄色背景展示)。鼠标悬浮信息图标展示具体blocked信息。
请求其他信息
总请求数
请求列表底部栏记录total requests
注意: 此数字仅跟踪自 DevTools 打开以来已记录的请求。如果在打开 DevTools 之前发生了其他请求,则不计算这些请求。**
总下载资源大小
请求列表底部栏记录total download size
注意: 此数字仅跟踪自 DevTools 打开以来已记录的请求。如果在打开 DevTools 之前发生了其他请求,则不计算这些请求。
总资源大小(未压缩)
请求列表底部栏记录total resources size
注意: 此数字仅跟踪自 DevTools 打开以来已记录的请求。如果在打开 DevTools 之前发生了其他请求,则不计算这些请求。
查看资源未压缩的大小
使用 large request rows,查看Size列字段,下一行数字为未压缩大小。(鼠标悬浮查看title描述)
查看加载事件
请求列表底部栏记录DOMContentLoaded
事件和load
事件的时间。DOMContentLoaded
事件为蓝色,load
事件为红色。
相关功能使用补充
阻塞请求
除了直接在请求列表右击菜单中选择Block 请求
通过菜单直接打开Network request blocking
工具面板
还可以使用命令行输入 Show Network request blocking
Network request blocking
工具面板展示
点击 + 号添加拦截请求规则,支持正则表达式
点击Add保存,拦截生效,Reload一下页面查看效果
勾选Enable network request blocking
开启/关闭列表拦截规则
点击 删除所有请求拦截规则
单条拦截规则允许修改/删除