在上一篇文章《网络监控工具的重新加载》中，我们讨论了重构网络监控工具的原因。我们还了解到，使用 Web 标准构建开发工具使我们能够在不同的环境中运行它们 - 它们可以加载在 Firefox 开发者工具箱中，也可以作为标准 Web 应用程序加载到浏览器选项卡中。

在这篇配套文章中，我们将向您展示如何尝试这些操作并亲眼见证网络监控工具的实际应用。

获取源代码

Firefox 开发者工具代码库目前是 Firefox 源代码仓库的一部分，因此下载它需要下载整个仓库。获取源代码并进行代码开发有多种方法。您可能需要从我们的 Github 文档 开始，其中包含详细的说明。

一种方法是使用 Mercurial 并克隆 mozilla-central 仓库以获取本地副本。

# This may take a while...
hg clone https://hg.mozilla.org/mozilla-central
cd mozilla-central

我们“使用 Web 标准构建 Web 工具”的策略的一部分也包括将我们的代码库从 Mercurial 迁移到 Git（在 github.com 上）。因此，最终，获取源代码的方式将发生永久性改变，克隆和使用代码将变得更加容易快捷。

运行开发者工具箱

目前，如果您想构建网络监控工具并在 Firefox 开发者工具箱中运行它，请按照这些详细的 说明进行操作。

基本上，您只需要使用 mach 命令。

cd mozilla-central
./mach build

构建完成后，启动编译后的二进制文件并打开开发者工具箱（工具 -> Web 开发者 -> 切换工具）。

您可以在对源代码进行更改后快速重建，方法如下：

./mach build faster

运行开发服务器

为了在网页中运行 Net Monitor（实验性功能），您需要安装以下软件包：

• Node
• NPM
• Yarn
• Firefox（无论是 发布版本 还是从源代码构建的版本）。

我们开发了一个简单的容器，允许在网页中运行 Firefox 开发工具（不仅是网络监控工具）。它被称为 Launchpad。Launchpad 负责与被调试的 Firefox 实例建立连接并加载我们的网络监控工具。

下图描述了整个概念：

• Net Monitor 工具（客户端）就像任何其他标准 Web 应用程序一样，在浏览器选项卡中运行。
• 该应用程序由开发服务器（服务器）通过 localhost:8000 提供服务。
• Net Monitor 工具（客户端）通过 WebSocket 连接到目标（被调试）Firefox 实例。
• 目标 Firefox 实例需要监听端口 6080 以允许建立 WebSocket 连接。
• 使用 yarn start 启动开发服务器。

让我们仔细看看如何设置开发环境。

首先，我们需要为我们的开发服务器安装依赖项：

cd mozilla-central
cd devtools/client/netmonitor
yarn install

现在我们可以运行它：

yarn start

如果一切正常，您应该看到以下消息：

Development Server Listening at http://localhost:8000

接下来，我们需要在要调试的目标 Firefox 浏览器中监听传入连接。打开开发者工具栏（工具 -> Web 开发者 -> 开发者工具栏）并在其中输入以下命令。这将开始监听，以便工具可以连接到该浏览器。

listen 6080

开发者工具栏 UI 应该在浏览器窗口底部打开。

最后，您可以加载 localhost:8000。

现在您应该看到 Launchpad 用户界面。它列出了目标 Firefox 浏览器中打开的浏览器选项卡。您还应该看到这些选项卡之一是 Launchpad 本身（从 localhost:8000 运行的最后一个网络监控选项卡）。

您只需要点击要调试的选项卡之一。一旦 Launchpad 和网络监控工具连接到选定的浏览器选项卡，您就可以重新加载连接的选项卡并查看 HTTP 请求列表。

如果您更改底层源代码并刷新页面，您将立即看到更改。

查看以下屏幕截图，以了解在 Launchpad 上运行网络监控工具并利用热重载功能以立即查看代码更改的详细流程。

您可能还想阅读 mozilla-central/devtools/client/netmonitor/README.md，以获取有关如何构建和运行网络监控工具的更多详细信息。

未来计划

我们相信使用标准 Web 技术构建 Web 工具是正确的方法！我们的工具是为 Web 开发者设计的。我们希望您能够使用您在开发 Web 应用程序和服务时已使用的相同技能和知识来使用我们的工具。

我们正在为 Firefox 开发工具规划更多强大的功能，我们相信未来充满了令人兴奋的事情。以下是路线图中的预告片。

• 连接到 Chrome
• 连接到 NodeJS
• 与现有 IDE 集成

敬请关注！

Jan 'Honza' Odvarko