在上一篇《重构后的Firefox网络监视工具，里边加了什么黑科技？》中，除了深入了解重构之后的网络监视器工具，我们还了解到，使用Web标准构建开发工具使我们能够在不同的环境中运行它们比如加载在Firefox Developer Toolbox中，或者作为标准Web应用程序加载到浏览器选项卡中。

在本文中，我们将向你展示如何尝试这些操作，并使用网络监视器进行黑客攻击。

获取源代码

Firefox开发人员工具代码库目前是Firefox源代码库的一部分，因此，下载它需要下载整个repo。有几种方法可以获取源代码并对代码进行处理。你可能需要了解Github文档，以获取详细的说明。

方法之一便是使用Mercurial复制mozilla中央存储库来获取副本。

研究人员使用Web标准构建Web工具时的一部分计划还包括将Firefox的代码库从Mercurial移动到Git（在github.com上）。因此，重构之后，我们可以轻松复制和使用源代码。

运行开发工具箱

现在，如果要构建网络监视器并在Firefox Developer Toolbox中运行，请按照这个详细说明进行操作。

简单来说，你需要做的就是使用mach命令。

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

如下所示，对源代码进行更改后，你可以快速重建。

运行开发服务器

为了在网页中运行Net Monitor，你需要安装以下软件包：

Node
NPM
Yarn
重构之后的Firefox

Firefox的开发人员开发了一个简单的容器，允许在网页内运行Firefox开发工具。这就是Launchpad。 Launchpad负责连接到被调试的Firefox的样本，并加载网络监视器工具。

下图描绘了整个概念：

1.网络监视器工具（客户端）正像任何其他标准Web应用程序一样在浏览器选项卡中运行。

2.该应用程序由开发服务器（服务器）通过localhost：8000提供

3.Net Monitor工具（客户端）通过WebSocket连接到目标（调试）的Firefox样本。

4.目标Firefox实例需要在端口6080上监测以允许创建WebSocket连接。

5.开发服务器开始使用 yarn 启动

我们来看看如何设置开发环境。

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

然后我们可以运行它：

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

接下来，我们需要在目标Firefox浏览器中监测传入连接，从而进行调试。打开开发人员工具栏（工具 – > Web开发人员 – >开发工具栏），并在其中键入以下命令。就将开始监测，所以工具可以连接到这个浏览器。

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

最后，你可以加载localhost：8000

你现在应该会看到Launchpad用户界面，它列出了目标Firefox浏览器中打开的浏览器选项卡。你还应该看到，其中一个选项卡是Launchpad本身（在localhost：8000运行的最后一个net monitor选项卡）。

你只需单击要调试的其中一个选项卡即可，一旦Launchpad和网络监视器工具连接到所选的浏览器选项卡，你就可以重新加载连接的选项卡，并查看HTTP请求的列表。

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

查看以下视频，以便对启动板顶部运行的网络监视器工具有更加详细的了解，并利用热加载(Hot Reload)功能立即查看代码更改。

另外，你可能还需要阅读文档以获取有关如何构建和运行网络监视器工具的更多详细信息。

未来我们会继续关注如何将该工具连接到Chrome、NodeJS，并与现有IDE集成。