chrome开发者工具-Network
2020-11-25 13:45:21 0 举报AI智能生成
登录查看完整内容
Chrome 开发者工具之Network 的使用
作者其他创作
大纲/内容
F12
位置
Chrome DevTools > Network
如何打开
通用快捷键
Windows/Linux
Ctrl + Shift + i
Mac
Command + Shift + i
chrome开发者工具-Network
功能
记录网络请求
录制网络请求
默认打开 DevTools 就开始录制
发出的请求在面板上以表格的形式展现
停止录制网络请求
操作
点击左上角红点
清理请求
保存跨页面加载的请求(Preserve log)
在页面加载时捕捉屏幕截图
交互
双击屏幕截图将会放大查看
重播 XHR 请求
改变加载行为
禁止缓存
模拟首次访问页面的情况
其他 DevTools 面板如何禁止缓存
Command + Shift + P > Show Network conditions
手动清理缓存
右键任一请求-> 选择 Clear Browser Cache
模拟离线
当你想要模拟无网络环境来调试 PWA 应用
Service Worker
PWA(Progressive Web Apps)
或者你想要玩小恐龙游戏
模拟低速网络连接
Slow 3G/Fash 3G 或者自定义成速度
其他 DevTools 面板如何限制网速
手动清理 cookies
重写用户代理
具体影响
发出 http 请求中请求头中 \"User-Agent\" header 的值被修改
过滤请求
通过属性过滤请求
使用
暂不支持 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
running
service-worker-initiated
显示 service-worker.js(只有首次注册的时候)
service-worker-intercepted
仅显示已通过 ServiceWorker 响应完成的资源
larger-than
显示大于指定大小(以字节为单位)的资源
单位
K/M
待确定是实际大小还是传输大小
method
mime-type
显示响应头中content-type 与指定值相同的资源
mixed-content
显示混合资源
priority
显示与指定优先级值匹配的资源
scheme
显示与指定 scheme 相同的资源
status-code
显示与指定 http 状态码相同的资源
自动以下拉框形式展示可选的属性以及属性值
按类型过滤请求
多选
多个请求类型是以 OR 的关系进行过滤
按时间过滤请求
在Overview窗格上单击并向左或向右拖动，以只显示在该时间段内处于活动状态的请求。
隐藏 data URL 请求
排序请求
按照请求表的列进行排序
只能单列
按活动阶段排序
阶段
Start Time
Response Time.
End Time
Total Duration
Latency
等待响应时间最短的请求位于顶部
分析请求
在请求表格上查看请求日志
Type
Initiator
请求触发者
可能值
Parser
Chrome的HTML解析器
Redirect
An HTTP redirect
Script
A JavaScript function
Other
其他一些过程或操作，例如通过链接导航到页面或在地址栏中输入URL。
size
响应头和响应体的总大小
Time
请求开始与请求响应结束的时间间隔
Waterfall
一个可视化的
添加和删除列
右键在请求表格上选择
响应头字段作为列
自定义 header
右键请求表格头部->Response Headers > Manage Header Columns.
根据 Waterfall 可以查看请求的前后顺序
分析WebSocket连接
绿色是发出的消息
白色是接收的消息
黄色是WebSocket操作码
红色有错误存在
预览响应体
查看原始的响应体
查看 http header
可以看到请求头和响应头
默认是解析后的结果
可以查看解析的结果
查看 http Query
默认解析后的结果
可以看原始 query string
可以查看Query 的 URL Encode 的结果
查看请求的时间分解
方法
Hover 到 Waterfall
时序分解阶段说明
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 分析器
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 条评论
回复 删除
下一页
