打开“网络”面板 🌈
-
方法一：点击顶部操作栏中的 Network
-
方法二：通过命令菜单打开
- 按如下键打开命令菜单：
- macOS：
Command+Shift+P - Windows、Linux、ChromeOS：
Ctrl+Shift+P - 开始输入
Network，选择显示网络面板，然后按Enter键。
录制网络请求 🌈
默认情况下，只要开发者工具已打开，开发者工具会在 Network 面板中记录所有网络请求。
停止记录网络请求 🎈
如需停止录制请求，请执行以下操作：
- 点击停止记录网络日志。
位于网络面板上。该图标变为灰色，表示开发者工具不再记录请求。
- 选中网络面板，按下
Command+E(Mac) 或Ctrl+E（Windows、Linux）。
清除请求 🎈
点击清除 🚫 以清除 Requests 表格中的所有请求。
在网页加载过程中保存请求 🎈
-
打开演示链接：example.com/
-
未勾选 保留日志
第一次加载页面：
刷新页面，会发现开发者工具没有保存之前的请求
-
勾选 保留日志 第一次加载页面：
刷新页面，会发现开发者工具保存了之前的请求
在网页加载期间截取屏幕截图 🎈
-
启用屏幕截图，请打开 Network 面板中的 Settings ⚙，然后选中 Capture screenshot
-
打开演示链接：example.com/
-
功能：
-
将鼠标悬停在屏幕截图上即可查看截取屏幕截图的时间点
-
双击缩略图可放大
-
更改加载行为 🌈
通过停用浏览器缓存来模拟首次访问者 🎈
-
选中停用缓存复选框，在重复访问时，请求会从浏览器缓存中提供
-
使用其它开发者工具面板时想要停用缓存
-
按下
Ctrl + Shift + P，选择 网络状况，选中或清除 停用缓存 复选框
-
手动清除浏览器缓存 🎈
-
要随时手动清除浏览器缓存，请右键点击 Requests（请求）表格中的任意位置，然后 选择清除浏览器缓存
离线模拟 🎈
-
要模拟完全离线的网络体验，请从停用缓存复选框旁边的网络节流下拉菜单中选择离线
模拟慢速网络连接 🎈
-
如需模拟快速 3G、慢速 3G，请从顶部操作栏中的节流下拉菜单中选择相应的预设
创建自定义限制配置文件 ✨
-
选择 添加
-
添加自定义配置文件
限制 WebSocket 连接
除了 HTTP 请求外，从 99 版开始，开发者工具还会限制 WebSocket 连接数。
如需观察 WebSocket 节流，请执行以下操作：
- 在网络面板上，选择无节流，并通过连接发送消息。
- 创建一个非常慢的自定义节流配置文件，例如
10 kbit/s。如此慢的配置文件可帮助您注意到差异。 - 在网络面板上，选择相应配置文件并发送另一封邮件。
- 切换 WS 过滤器，点击您的连接名称，打开消息标签页，然后查看在启用和未开启节流功能的情况下发送和回显的消息之间的时差。例如：
手动清除浏览器 Cookie 🎈
-
要随时手动清除浏览器 Cookie，请右键点击 Requests（请求）表格中的任意位置，然后选择 清除浏览器 Cookie
替换用户代理 🎈
-
点击
图标，打开 Network Conditions 抽屉式导航栏。
-
清除自动选择。
-
从菜单中选择用户代理选项，或在框中输入自定义选项。
搜索请求 🌈
如需在 请求标头、载荷 和 响应 中进行搜索，请执行以下操作：
-
按以下快捷键可打开右侧的搜索标签页：
- 在 macOS 上，按
Command+F。 - 在 Windows 或 Linux 上，按
Ctrl+F。
- 在 macOS 上，按
-
在搜索标签页中，输入您的查询，然后按
Enter键。（可选）点击match_case或regular_expression，分别启用区分大小写的功能或正则表达式。 -
点击其中一个搜索结果。Network 面板以黄色突出显示 Headers、Paload 或 Response 标签页中的请求和匹配的字符串。
在所有已加载的资源中搜索文本 🎈
-
打开搜索面板，在搜索面板的搜索栏中输入查询，然后按
Enter键 -
区分大小写和匹配正则表达式
如需使查询区分大小写，请切换
match_case匹配大小写按钮如需搜索与正则表达式匹配的文本，请开启
regular_expression正则表达式按钮 -
重新运行查询、展开和清除结果
-
如需重新运行搜索查询，请点击 刷新。
若要展开所有搜索结果，请执行以下操作：
-
在 Windows / Linux 上，按
Ctrl+Shift+{或} -
在 macOS 中，按
Command+Option+{或}要清除搜索结果，请点击 🚫 清除。
-
