Firefox开发工具的早期版本已经在Firefox中提供了网络监视器工具，任何关心页面加载性能和网页运行速度的用户都非常喜欢这个工具。不过该工具最近被进行了广泛的重构（项目代号为Netmonitor.html），这篇文章旨在向大家解释如何设计新架构以及你如何使用重构之后的新技术。

以下就是Firefox Developer Toolbox中运行的网络监视器用户界面。

目标

重构的主要目标之一是在标准Web技术之上重建整个工具，开发人员删除了所有特定于Firefox的旧版代码，如XUL（XML用户界面语言），还有使用特定于Firefox的API的代码。这是一个很大的进步，因为使用网络标准可以允许你在两个不同的环境中运行整个工具的代码库：

1.开发工具箱

2.任何网页

任何熟悉Firefox开发工具的人都知道第一种情况，开发者工具箱可以在浏览器窗口的底部轻松打开，并附带各种工具（包括网络监视器）。

第二个工具是新的，现在可以像任何其他标准Web应用程序一样在浏览器选项卡中加载该工具，以下就是其界面外观。

请注意，该页面是从localhost：8000加载的，这是开发服务器正在运行的位置。

将工具作为网络应用程序运行的能力是一件很重要的突破，现在你可以使用所有的浏览器工具来开发工作流。虽然可以使用DevTools来调试DevTools，但使用浏览器中的工具会让调试现在变得更加简单和方便。当然，你也可以在其他浏览器中加载该工具。开发也更简单，

因为我们不必构建Firefox。总而言之，一个简单的标签刷新就足以让网络监视器重新加载并测试代码更改。

架构

我们已经在以下技术的基础上构建了新的网络监视器前端：

React
Redux
Immutable
Mocha
Enzyme
Webpack
Yarn

Firefox Developer Tools需要复杂的UI属性，所以开发人员会使用受欢迎的React和Redux组合来为所有的工具建立一个简洁而一致的代码库，网络监视器也不例外。目前开发人员已经实现了一组React组件，它们负责渲染UI，起到存储的作用，通过HTTP拦截收集所有数据，最后是一组用户可能要执行的操作。

开发人员也改变了以前编写测试的方式，不再使用Firefox特定的测试工具，而是慢慢转向比较广泛使用的库，如Mocha 和 Enzyme。这样一来，就更容易理解新的代码库。

开发人员正在使用Webpack在网页中运行时构建捆绑包，捆绑包会通过localhost：8000服务。

一般架构基于React和Redux概念中引入的流程。

1.表示NetMonitorApp的根组件可以在Developer Toolbox或Web页面中呈现。

2.操作负责过滤，清除请求列表，排序和打开具有详细信息的侧面板。

3.我们的所有数据都存储在存储对象中，包括有关HTTP流量的所有收集的数据。

新功能

我们一直主要关注代码重构，但是还有一些新功能或 UI方面的改进。我们来看看其中的一些。

Column Picker

有一些列包含有关个别请求的附加信息，用户可以使用上下文菜单来选择那些认为重要的信息。

总计数据（Summary Data）

研究人员已经为列表中当前显示的请求实现了更好的总计，它现在位于面板的底部。

列表中的请求数

所有请求的大小或传送大小

加载所有请求所需的总时间

发生DomContentLoaded事件的时间

加载事件发生的时间

过滤性能（Filtering By Properties）

过滤器UI现在更强大了，可以根据各种属性过滤请求列表。例如，你可以在过滤器输入框中键入：greater-than：50，只查看大于50个字节的请求。

了解更多MDN

指向MDN的UI中有许多地方有更多信息的链接。例如，您可以快速了解各种HTTP标头的使用方式。点击这里，了解更多的MDN

总结

我们相信，根据Web标准构建新一代Firefox Developer Tools是正确的方式，因为这意味着工具可以在不同环境中运行，并且可以更有效地与其他项目（例如IDE）集成。 以网络标准为基础的工具会使许多事情成为可能，现在你还可以考虑将该工具作为可以从互联网平台中受益的在线Web服务。 你可以在网络上分享收集的数据以及调试上下文，打开一个真正的社交调试世界的大门。