chrome开发者工具-Network
2020-11-25 13:45:21 0 举报AI智能生成
Chrome 开发者工具之Network 的使用
作者其他创作
大纲/内容
提供页面资源加载的可视化, 辅助开发者排查网络问题
F12
位置
Chrome DevTools > Network
如何打开
通用快捷键
F12
Windows/Linux
Ctrl + Shift + i
Mac
Command + Shift + i
功能
记录网络请求
录制网络请求
默认打开 DevTools 就开始录制
发出的请求在面板上以表格的形式展现
停止录制网络请求
操作
点击左上角红点
Command+E (Mac) /Control+E (Windows, Linux)
当停止后, 请求表格的内容就不再发生变化, 及时当前正在排队的请求
清理请求
当你为了观察其他操作引发的请求的时候, 你可以使用此操作
保存跨页面加载的请求(Preserve log)
当你想到观察页面跳转的时候的请求变化, 你可能需要此操作, 比如单点登录
注意: 虽然能保留页面跳转之前的请求, 但是响应体已经丢失
在页面加载时捕捉屏幕截图
开启此选项, 将可以看到页面加载的每 1s或1ms 的屏幕截图
交互
将鼠标悬停在一个截图上, 一条黄线出现在概览窗格上, 这条黄色线就是此张截图加载的时机
点击屏幕截图, 则会过滤在截图发生之后的所有请求
双击屏幕截图将会放大查看
重播 XHR 请求
操作: 右键请求表格中的某一请求, 选择 Replay XHR
执行这一操作, 将会重新发起你选中的请求
改变加载行为
禁止缓存
模拟首次访问页面的情况
其他 DevTools 面板如何禁止缓存
Command + Shift + P > Show Network conditions
手动清理缓存
右键任一请求-> 选择 Clear Browser Cache
注意: 将会清理所有页面的缓存, 而不是当前标签页
模拟离线
当你想要模拟无网络环境来调试 PWA 应用
Service Worker
PWA(Progressive Web Apps)
或者你想要玩小恐龙游戏
模拟低速网络连接
Slow 3G/Fash 3G 或者自定义成速度
其他 DevTools 面板如何限制网速
Command + Shift + P > Show Network conditions
手动清理 cookies
右键任一请求, 选择 Clear Browser Cookies
重写用户代理
通常模拟不同的浏览器的 User agent, 来查看不同请求响应行为
具体影响
发出 http 请求中请求头中 "User-Agent" header 的值被修改
Command + Shift + P > Show Network conditions
过滤请求
通过属性过滤请求
使用
可以根据一种属性, 比如 domain(资源所属域名)
AND: 也可以同时指定多种属性, 多个属性之间使用使用空格连接, 关系为 AND
暂不支持 OR
支持的属性列表
cookis 相关
cookie-domain
展示设置特定 cookie domain 的请求
cookie-name
cookie-path
cookie-value
set-cookie-name
set-cookie-value
domain
仅显示来自指定域名的资源
可以使用通配符 * 来匹配多个域名
比如 *.com 就会匹配所有以 .com 结尾的域名下的资源
has-response-header
展示包含指定 http 响应头的资源
is
仅展示处于某种请求状态的资源
可选值
from-cache
仅显示来自缓存的资源, 不包含 304
running
仅显示当前活跃的请求, 比如处于 pending, WebSocket
service-worker-initiated
显示 service-worker.js(只有首次注册的时候)
service-worker-intercepted
仅显示已通过 ServiceWorker 响应完成的资源
larger-than
显示大于指定大小(以字节为单位)的资源
单位
K/M
待确定是实际大小还是传输大小
method
请求方法, 比如 GET/POST
mime-type
显示响应头中content-type 与指定值相同的资源
mixed-content
显示混合资源
priority
显示与指定优先级值匹配的资源
scheme
显示与指定 scheme 相同的资源
status-code
显示与指定 http 状态码相同的资源
自动以下拉框形式展示可选的属性以及属性值
DevTools 会在你书写的时候自动补全属性以及属性值, 以下拉框的形式展现, 供你选择
按类型过滤请求
在请求类型行选择一种请求类型来进行过滤, 比如 XHR 过滤 ajax, JS 过滤那些通过 script 引入的资源
多选
可以按住 Command (Mac) or Control (Windows, Linux), 然后鼠标点击多个请求类型
多个请求类型是以 OR 的关系进行过滤
按时间过滤请求
在Overview窗格上单击并向左或向右拖动，以只显示在该时间段内处于活动状态的请求。
隐藏 data URL 请求
排序请求
按照请求表的列进行排序
只能单列
按活动阶段排序
右键请求表格列, 选择 Waterfall 下的其他值
阶段
Start Time
Response Time.
End Time
Total Duration
Latency
等待响应时间最短的请求位于顶部
分析请求
在请求表格上查看请求日志
Type
请求类型, 并非 MIME 类型
Initiator
请求触发者
可能值
Parser
Chrome的HTML解析器
Redirect
An HTTP redirect
Script
A JavaScript function
Other
其他一些过程或操作，例如通过链接导航到页面或在地址栏中输入URL。
size
响应头和响应体的总大小
Time
请求开始与请求响应结束的时间间隔
Waterfall
一个可视化的
添加和删除列
右键在请求表格上选择
响应头字段作为列
右键请求表格头部, 选择已给出的 header 字段
自定义 header
右键请求表格头部->Response Headers > Manage Header Columns.
根据 Waterfall 可以查看请求的前后顺序
分析WebSocket连接
绿色是发出的消息
白色是接收的消息
黄色是WebSocket操作码
红色有错误存在
预览响应体
可读性更高, 比如 json 会格式化, 图片直接显示可预览的内容
查看原始的响应体
查看 http header
可以看到请求头和响应头
默认是解析后的结果
可以查看解析的结果
查看 http Query
默认解析后的结果
可以看原始 query string
可以查看Query 的 URL Encode 的结果
查看请求的时间分解
方法
Hover 到 Waterfall
点击请求, 然后选择 Timing 标签页
时序分解阶段说明
Queueing
排队时间
什么时候排队
当存在更高优先级的请求
已为该来源打开了六个TCP连接。 仅适用于HTTP / 1.0和HTTP / 1.1。
浏览器正在磁盘缓存中短暂分配空间
Stalled
停止时间
请求可能会因为 Queueing 中描述的任何原因而停止
DNS Lookup
Initial connection
浏览器正在建立连接，包括TCP握手/重试和协商SSL。
Proxy negotiation
代理协商时间
Request sent.
请求被发送消耗的时间
ServiceWorker Preparation
Request to ServiceWorker
Waiting (TTFB).
浏览器正在等待响应的第一个字节
Content Download.
浏览器接收响应的消耗时间
Receiving Push
Reading Push
查看请求的发起者和依赖项
shift + 鼠标悬浮在要查看的请求 Name 处
绿色为发起请求方
如果有多个绿色, 则最近的绿色请求为此请求的发起方, 更上面的绿色为当前请求发起方的发起方
红色为此请求的依赖方
查看 load 事件
截图
Load 事件
DOMContentLoaded
显示蓝色竖线
Load
显示红色竖线
导出请求数据
保存所有的网络请求数据到 HAR 文件
把自打开DevTools以来发生的所有请求保存到HAR文件中
无法过滤请求或只保存单个请求
获得HAR文件后，可以将其重新导入DevTools中进行分析
什么是 HAR? 一个在线的HAR 分析器
拷贝一个或多个请求到剪贴板
Copy Link Address
Copy Response
Copy as fetch
Copy as Node.js fetch
Copy as cURL
Copy All as cURL
Copy All as fetch
Copy All as Node.js fetch
Copy All as HAR
改变 Network 面板布局
隐藏过滤器窗格
使用大的请求行
可以直接显示传输大小和实际大小
隐藏 Overflow 窗格
切换 screenshot 窗格
按照 frame 分组
0 条评论
下一页
