让你重新认识你的 Chrome DevTools 之 Network

685 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天,点击查看活动详情

记录网络请求

默认情况下,只要 DevTools 处于打开状态,DevTools 就会在 network 面板中记录所有的网络请求。

image.png

停止记录网络请求

  • 点击面板上的 停止录制网络,它变成灰色表示 DevTools 不再记录请求。

image.png

清除请求

点击面板上的 清除 清除 requests 表中的所有请求。

image.png

跨页面加载保存请求

要跨页面加载保存请求,点击 Preserve log 选项,会保存所有请求。

image.png

在页面加载期间捕获屏幕截图

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

image.png

将鼠标悬停在屏幕截图上以查看该屏幕截图的截取点。概述窗格上会出现一条黄线。

image.png

单击屏幕截图的缩略图以过滤掉在捕获屏幕截图后发生的任何请求。

双击缩略图以放大它。

image.png

重放 XHR 请求

image.png

image.png

禁用浏览器缓存

DevTools 禁用浏览器缓存。这更准确地模拟了首次用户的体验,因为请求是在重复访问时从浏览器缓存中提供的。

image.png

手动清除浏览器缓存

要随时手动清除浏览器缓存,请右键单击请求表中的任意位置并选择清除浏览器缓存

image.png

离线 和 慢速网络连接 模拟

模拟完全离线的网络体验,也可以切换模拟 2G、3G 和其他连接速度。选择 Custom > Add 添加自定义。

image.png

image.png

DevTools 在Network 选项卡旁边显示一个警告图标,提醒限制已启用。

image.png

手动清除浏览器 cookie

要随时手动清除浏览器 Cookie,请右键单击请求表中的任意位置并选择清除浏览器 Cookie

image.png

覆盖用户代理

过滤请求

隐藏数据 URL

数据 URL是嵌入到其他文档中的小文件。您在请求表中看到的任何以开头的请求data:都是数据 URL。

选中隐藏数据 URL复选框以隐藏这些请求。

image.png

查看 HTTP 标头

查看有关请求的 HTTP 标头数据:

  1. 单击请求表的名称列下的请求 URL。
  2. 单击标题选项卡。

image.png

查看响应正文的预览

查看响应正文的预览:

  1. 单击请求表的名称列下的请求 URL。
  2. 单击预览选项卡。

此选项卡主要用于查看图像。

image.png

查看响应正文

查看请求的响应正文:

  1. 单击请求表的名称列下的请求 URL。
  2. 单击响应选项卡。

image.png