Firefox 开发者工具团队非常自豪地宣布，Firefox 23（在 Firefox Beta 中，今天发布）附带了一个初始但功能非常强大的网络监视器工具，它不仅提供了与其他工具集类似的功能，而且在许多方面都对其进行了改进。这一重要步骤是整个团队，特别是 Victor Porof 和 Mihai Sucan 努力的结果。

让我们开始吧

为了让您对网络监视器的运行方式有最佳了解，以下是一系列要遵循的步骤

1. 如果您还没有下载、安装并运行 Firefox 23 Beta（或 Firefox Aurora 或 Firefox Nightly - 有关 Firefox 和发布渠道 的更多信息）。
2. 打开网络监视器工具
   • 从菜单中：工具 => Web 开发 => 网络
   • 从键盘：Ctrl + Alt + Q（Windows/Linux）或 Cmd + Alt + Q（Mac OS X）
3. 加载一个 有趣的网站。

当 Firefox 加载页面时，您会看到每个单独的请求都作为一行添加，就像您从其他工具中预期的那样。特别是，现在不仅可以轻松地可视化页面部分加载的速度和顺序，还可以可视化问题所在：缺少的资源、缓慢的 Web 服务器、有错误的 API。

当您习惯使用网络监视器时，您还会注意到，您不需要在已加载的页面上点击刷新，一旦您打开网络工具，任何后续发生的请求都将被记录。例如，如果您对应用程序发出的 xhr 请求感兴趣，只需打开监视器并开始点击按钮 - 您应该会看到任何 API 调用像往常一样被记录，而无需重新加载。

一目了然的状态

您应该立即注意到的网络工具显示页面加载方式的一件事是，我们已经注意提供信息和设计线索，以便您在页面加载时一目了然地了解正在发生的事情

我们尝试创建一个简洁的 UI，它可以提供整个页面加载方式的关键方面，而不会创建过多的视觉杂乱

• 诸如 404 之类的错误将以深红色显示，以便使其在视觉上与绿色的成功请求或黄色的缓存请求区分开来。
• URL 将被解析，仅显示文件名和域名。
• 默认情况下，加载按时间顺序排序，但您也可以按任何顶部列排序，例如按域名或文件名排序。
• 您可以轻松查看请求的类型，无论是 html 内容、图像还是 API 请求。
• 您可以点击列标题，按方法、文件名、域名、类型或大小对请求进行排序。

细节决定成败

加载完页面所有资源后，点击单个请求会打开侧边栏视图，该视图提供有关该请求的详细信息，并细分为显示给定请求不同方面的面板：标头、Cookie、参数、响应和时间。类似于检查器工具的工作方式，如果将工具停靠到右侧，此面板将整齐地弹出到请求列表下方

快速浏览

**标头**面板对于调试资源缓存问题特别有用，此面板提供了请求和响应标头的解析列表，还支持基于名称或值进行过滤

**时间**面板为您提供了所选请求花费时间的详细可视化细分。是 DNS 吗？是服务器本身吗？

如果您正在调试 API 请求或表单提交，您会非常喜欢我们在 **参数** 面板中如何解析 URL 参数

您是否正在使用大量 API 调用来提高应用程序的响应速度？JSON 响应将被解析并显示为 **响应** 面板中的可导航对象，以便于检查从服务器返回的数据。您还可以根据 JSON 值过滤数据。

后续步骤

能够在 Firefox 23 Beta 中向更多开发者提供网络监视器是一件很棒的事情，但与此同时，我们并没有停止添加新功能。Firefox 24（现在在 Aurora 渠道 中）具有在过去 6 周左右时间里出现的一些显著改进

• 您现在可以根据请求“类型”过滤请求，包括 XHR、图像、html。
• 参数面板支持 POST 请求参数。
• 您可以使用上/下箭头键浏览请求列表。
• 还有更多错误修复和改进！