网络监视器

网络监视器 (netmonitor) 显示 Firefox 发出的所有网络请求（例如，加载页面时或执行 XMLHttpRequest 时），每个请求花费的时间以及每个请求的详细信息。您还可以编辑方法、查询、标头并重新发送请求。阅读 更多信息 以了解所有功能以及如何使用该工具。

UI

网络监视器 UI 使用 React 组件（位于 src/components/）构建。

• MonitorPanel 位于 MonitorPanel.js 是根元素。

• 三个主要的容器组件是

  • Toolbar 面板相关功能。

  • RequestList 显示每个请求的信息。

  • NetworkDetailsBar 显示每个请求的详细信息。

  • StatusBar 加载时显示统计信息。

• src/assets 影响网络监视器面板的样式。

我们更倾向于使用无状态组件（由函数定义）而不是有状态组件（由类定义），除非组件必须维护其内部状态。

状态

除了 UI 之外，网络监视器还通过 Redux 管理应用程序状态。以下位置定义了应用程序状态

• src/constants.js 工具中使用的常量，包括操作和事件名称。

• src/actions/ 用于所有更改状态的操作。

• src/reducers/ 用于所有更改状态的 reducer。

• src/selectors/ 返回应用程序状态部分的格式化版本的函数。

我们使用 reselect 库来高效地执行状态计算。