网络请求列表

网络监视器的请求列表显示了在加载页面过程中发出的所有网络请求的列表。

网络请求列表

默认情况下,网络监视器会显示加载页面过程中发出的所有网络请求的列表。每个请求都显示在自己的一行中。

../../../_images/network_request_list.png

默认情况下,每次导航到新页面或重新加载当前页面时,网络监视器都会清除。您可以通过在设置中选中“启用持久日志”来覆盖此行为。

网络请求列

您可以通过右键单击表头并从上下文菜单中选择特定列来打开和关闭列。上下文菜单中提供了一个**重置列**命令,用于将列重置为其初始配置。

您还可以更改列的宽度,以帮助使您要查找的信息更容易查看。当您将鼠标指针移动到列的边框上时,鼠标指针会更改为调整大小图标。您可以拖动以手动设置列的大小。从 Firefox 76 开始,您可以双击列分隔符以调整其左侧列的大小以适应其内容。

上下文菜单中的**重置列**命令还会将列的宽度重置为默认值。



单击列标题标签会按该列对请求列表进行排序。您可以从上下文菜单中选择“重置排序”将排序重置为默认值。

Screenshot of the context menu for selecting columns to display in the Network monitor

以下是所有可用列的列表

  • **状态**:返回的 HTTP 状态代码。数字代码显示在彩色背景上,以帮助异常代码脱颖而出。如果没有响应,则此列为空。或者您可能会看到一个带斜线的红色圆圈带斜线的红色圆圈,表示浏览器或服务器阻止的响应。

  • **方法**:使用的 HTTP 请求方法。

  • **域名**:请求路径的域名。

    • 如果请求使用了 SSL/TLS 并且连接存在安全弱点(例如弱密码),您将在域名旁边看到一个警告三角形。

    • 将鼠标悬停在域名上以查看 IP 地址。

    • 域名旁边有一个图标,提供有关该请求的安全状态的额外信息。请参阅安全图标

  • **文件**:请求的文件的基名称。

    • (从 Firefox 80 开始)在“文件”列的右侧边缘,如果服务器等待时间超过阈值(默认值:500 毫秒),则会出现一个乌龟图标。工具提示会解释问题。您可以在配置编辑器about:config)中通过修改devtools.netmonitor.audits.slow设置来配置阈值。

    • Screenshot of a network request with a turtle icon, and a tooltip explaining the problem

  • **URL**:请求文件的URL

  • **协议:**用于传输数据的网络协议,此列默认隐藏。

  • **方案:**请求路径的方案(https/http/ftp/…)。此列默认隐藏。

  • **远程 IP**:响应请求的服务器的 IP 地址。此列默认隐藏。

  • **类型**:响应的Content-type

  • **Cookie:**与请求关联的请求 Cookie 的数量。此列默认隐藏。这是 Firefox 55 中的新增功能。

  • **Set-Cookie:**与请求关联的响应 Cookie 的数量。此列默认隐藏。这是 Firefox 55 中的新增功能。

  • **已传输**:实际传输以加载资源的字节数,或有关未传输资源的原因的消息。如果资源已压缩,则数值小于**大小**。

    • 如果从服务工作线程缓存中获取资源,则此单元格会显示“服务工作线程”。

    • 缓存的资源可以同时从缓存和网络中获取,这可以提高慢速缓存的加载时间。从 Firefox 68 开始,“已传输”列会根据较快的源显示“已缓存(竞争)”或“ [大小](竞争)”。此功能称为与网络竞争缓存 (RCWN)

    • 如果资源被阻止,则消息会指示阻止的原因。例如,“CSP”、“恶意软件”、“CORS 缺少允许来源”、“被 [扩展名称] 阻止”。

  • **大小**:传输资源的大小。

图像缩略图

如果请求是针对图像的,则将鼠标悬停在其文件名上会在工具提示中显示图像的预览。

../../../_images/image_preview.png

安全图标

网络监视器在“域名”列中显示一个图标。

../../../_images/network_message_list_63.png

这提供了有关请求安全状态的额外信息。

图标

含义

image3

HTTPS

image4

弱 HTTPS(例如,使用了弱密码)

image5

HTTPS 失败(例如,证书无效)

image6

HTTP

image7

本地主机

image8

指示 URL 属于已知的跟踪器,启用内容阻止后将被阻止。

时间线

请求列表还显示每个请求的不同部分的时间线。

../../../_images/timeline.png

每个时间线在其行中相对于其他网络请求获得水平位置,因此您可以查看加载页面的总时间。有关此处使用的颜色编码的更多详细信息,请参阅时间页面的部分。

从 Firefox 45 开始,时间线还包含两条垂直线。

  • 蓝线标记页面DOMContentLoaded事件触发的点。

  • 红线标记页面load事件触发的点。

阻止特定 URL

如果您希望查看页面在没有资源时的外观(例如,如果它被浏览器或扩展程序阻止),则可以阻止与您指定的模式匹配的请求。

  1. 单击工具栏中的**请求阻止**图标。这将打开**阻止**侧边栏。(当您要关闭侧边栏时,再次单击该图标。)

Screen shot of the Blocking panel, with arrows indicating the panel and the Request Blocking toolbar icon
  1. 在带有占位符文本“当 URL 包含时阻止资源”的字段中输入字符串。

  2. 重新加载页面以使用指定的 URL 被阻止进行测试。

您可以使用请求阻止执行的其他操作

  • 要关闭或打开所有请求阻止:切换“启用请求阻止”旁边的复选框。

  • 要关闭或打开特定阻止:切换该项目旁边的复选框。

  • 要删除被阻止的项目,请单击将鼠标悬停在项目上时出现的 X 图标。

  • (从 Firefox 77 开始)右键单击列表中的任何项目,然后从上下文菜单中选择

    • **启用全部**启用阻止列表中的所有项目。

    • **禁用全部**禁用阻止列表中的所有项目。

    • **删除全部**删除列表中的所有项目。

从请求列表中阻止特定 URL

您还可以从请求列表中阻止 URL。

../../../_images/beforeblocking.png
  1. 将鼠标悬停在您想要阻止的请求列表中的项目上。

  2. 从上下文菜单中选择阻止 URL。

  3. 刷新页面后,该特定 URL 将被阻止,并且会在列表中项目的项目中添加一条消息,指示它已被 DevTools 阻止。

../../../_images/afterblocking.png

停止从请求列表中阻止 URL

../../../_images/unblockurl.png
  1. 将鼠标悬停在项目上。

  2. 选择**取消阻止 URL**。

  3. 现在,当您刷新页面时,该项目将被启用。

注意

(从 Firefox 80 开始)您还可以使用Web 控制台中的:block:unblock辅助命令阻止和取消阻止 URL。这些命令接受任何字符串,并影响包含该字符串的任何 URL。

筛选请求

您可以按内容类型、是否为 XMLHttpRequests 或 WebSocket 请求或请求属性来筛选请求。

筛选类型

如何应用

内容类型

使用工具栏中的按钮(**HTML**、**CSS**、**JS**)。

XHR 请求

使用工具栏中的**XHR**按钮。

WebSocket 连接

使用工具栏中的**WS**按钮。您可以按纯文本筛选(在这种情况下,文本用于查找部分匹配;输入“for”将匹配包含“for”一词的任何消息)或—从Firefox 75开始—使用正则表达式(通过在斜杠中括起正则表达式进行编写;“/.+Corp.*/”将查找任何出现“Corp”的情况,在其前面至少有一个字符,并且可能在其后面有或没有任何字符,例如)。

第三方附加组件WebSocket Sniffer可能也有帮助。

URL

使用工具栏中的“筛选 URL”框。您可以通过单击筛选框或按Ctrl + F(或在 Mac 上按Cmd + F)来聚焦它;然后开始键入。网络请求列表将被筛选,仅包含在域名或文件部分中包含筛选字符串的请求。

您可以筛选不包含筛选字符串的请求,方法是在查询前添加“ - ”运算符。例如,查询“ -google.com”将显示所有 URL 中不包含“google.com”的请求。

请求属性

使用工具栏中的搜索框。请参阅下一节。

按属性筛选

搜索框识别特定关键字,可用于按特定请求属性筛选请求。这些关键字后跟一个冒号和相关的筛选值。筛选值不区分大小写。在筛选值前加上减号 (-) 将否定筛选。您可以通过用空格分隔它们将不同的筛选组合在一起。

关键字

含义

示例

status-code

显示具有特定 HTTP 状态代码的资源。

状态码:304

方法

显示通过特定 HTTP 请求方法请求的资源。

方法:post

域名

显示来自特定域名的资源。

域名:mozilla.org

远程IP

显示来自具有指定 IP 的服务器的资源。

远程IP:63.245.215.53

远程IP:[2400:cb00:2048:1::6810:2802]

原因

显示与特定原因类型匹配的资源。这些类型可以在原因列的描述中找到。

原因:js

原因:stylesheet

原因:img

传输

显示具有特定传输大小或接近指定大小的传输大小的资源。 k 可用作千字节的后缀,m 可用作兆字节的后缀,例如,值 1k 等于 1024

传输:1k

大小

显示具有特定大小(解压缩后)或接近指定大小的资源。 k 可用作千字节的后缀,m 可用作兆字节的后缀,例如,值 1k 等于 1024

大小:2m

大于

显示大于指定大小(以字节为单位)的资源。 k 可用作千字节的后缀,m 可用作兆字节的后缀,例如,值 1k 等于 1024

大于:2000

-大于:4k

MIME类型

显示与指定 MIME 类型匹配的资源。

MIME类型:text/html

MIME类型:image/png

MIME类型:application/javascript

is:cachedis:from-cache 仅显示来自缓存的资源。 is:running 仅显示当前正在传输的资源。

is:cached

-is:running

方案

显示通过给定方案传输的资源。

方案:http

包含响应头

显示包含指定 HTTP 响应头的资源。

包含响应头:cache-control

包含响应头:X-Firefox-Spdy

设置Cookie域名

显示具有 Set-Cookie 头且 Domain 属性与指定值匹配的资源。

设置Cookie域名:.mozilla.org

设置Cookie名称

显示具有 Set-Cookie 头且名称与指定值匹配的资源。

设置Cookie名称:_ga

设置Cookie值

显示具有 Set-Cookie 头且值与指定值匹配的资源。

设置Cookie值:true

正则表达式

显示 URL 与给定 正则表达式 匹配的资源。

正则表达式:\d{5}

正则表达式:mdn|mozilla

例如,要查找所有 404(未找到)错误,您可以在搜索中键入“404”,自动完成功能会建议“status-code:404”,因此您最终会得到如下内容

../../../_images/404_filter.png

在请求中搜索

使用“搜索”面板对标头和内容运行全文搜索。

  1. 点击工具栏中的“搜索”图标。这将打开搜索侧边栏。

Screenshot of the Network monitor, with the request search sidebar displayed, and arrows indicating the search toolbar icon and the search box.
  1. 在侧边栏的搜索字段中输入字符串,然后按 EnterReturn。搜索字段下方的搜索结果区域将显示在请求或响应标头或响应内容中包含该字符串的请求。您可以展开每个项目以显示与该字符串匹配的特定项目。点击搜索结果中的某个项目将在监视器列表中突出显示该项目,并在请求详细信息窗格中显示相应的信息。

Screenshot of the search panel, with "newsletter" as the search string, and callouts for the expanded results, and corresponding items displayed in the request list and headers tab.

使用搜索面板的其他方法

  • 要清除搜索字符串:点击搜索字段中的“X”图标。

  • 要使搜索区分大小写:点击搜索字段旁边的“区分大小写”(Aa)图标。

  • 要关闭搜索面板,请执行以下操作之一

    • 点击搜索字段旁边的“X”图标。

    • 点击网络监视器工具栏中的“搜索”图标。

上下文菜单

在列表中右键点击一行将显示一个上下文菜单,其中包含以下选项

菜单项

描述

复制 > 复制 URL

复制 URL。

复制 > 复制为 cURL

将网络请求复制到剪贴板作为 cURL 命令,以便您可以从命令行执行它。请参阅下面的 复制为 cURL

复制 > 复制为 Fetch

将请求复制为对 <a href=”/en-US/docs/Web/API/fetch”>fetch()</a> 方法的调用,包括 URL 和任何设置对象。

复制 > 复制请求头

将请求的标头复制到剪贴板。

复制 > 复制响应头

将此请求的响应标头复制到剪贴板。

复制 > 复制响应

复制为该请求发送的整个响应。

复制 > 复制所有内容为 HAR

为列出的所有请求创建一个 HTTP 档案 (HAR),并将其复制到剪贴板。

另存为 HAR

为列出的所有请求创建一个 HTTP 档案 (HAR),并打开文件对话框,以便您可以将其保存到文件。

重新发送

重新发送最初发送的请求,无需进行任何更改。

编辑并重新发送

打开一个编辑器,使您能够编辑请求的方法、URL、参数和标头,并重新发送请求。

阻止 URL

阻止选定的 URL 以便将来请求。请参阅 从请求列表中阻止特定 URL

在新标签页中打开

在新标签页中重新发送请求 - 对调试异步请求非常有用。

在样式编辑器中打开

对于 CSS 资源,在 样式编辑器 中打开它。

启动 性能分析

在控制台中用作 Fetch

将请求作为对控制台中的 fetch() <https://mdn.org.cn/en-US/docs/Web/API/fetch> 方法的调用提交。

复制为 cURL

该命令可能包含以下选项

-X [METHOD]

如果方法不是 GET 或 POST

--data

用于 URL 编码的请求参数

--data-binary

用于多部分请求参数

--http/VERSION

如果 HTTP 版本不是 1.1

-I

如果方法是 HEAD

-H

每个请求标头一个。

如果存在“Accept-Encoding”标头,则 cURL 命令将包含 --compressed 而不是 -H "Accept-Encoding: gzip, deflate"。这意味着响应将自动解压缩。

--globoff

如果复制的 URL 包含方括号字符([]),则抑制 cURL 的通配符匹配功能。(从 Firefox 76 开始)

管理 HAR 数据

HAR 格式使您能够导出有关网络请求的详细信息。除了上下文菜单中 HAR 的“复制”和“保存”菜单项外,工具栏中的“HAR”下拉菜单中也提供了类似的菜单项,以及“导入”菜单项。

../../../_images/har-dropdown.png

网络监视器功能

以下文章介绍了使用网络监视器的不同方面