注意：自从这篇文章发表以来，Mozilla 开发者工具团队发布了 App Manager，这是一种更有效地远程调试 Firefox OS 应用的方法。要了解更多信息，请阅读 MDN 上的使用 App Manager。

如果您想为Gaia做出贡献，或者一直在为 Firefox OS 编写 Web 应用，那么您在使用B2G 桌面版或在设备上测试时遇到的痛点之一可能是缺乏开发者工具来检查和调试您的 HTML、CSS 和 JavaScript。

目前我们有两个跟踪错误，请继续投票以提高它们的优先级，以跟踪开发原生远程检查器和样式编辑器的工作，但我有几个非常令人兴奋的消息。您今天就可以访问远程调试器。

您可能会问，这是如何做到的？简单来说，一个词：Weinre。Weinre 是 Apache 基金会的一个项目，代表 WEb INspector REmote，顾名思义，它是一个与 Firebug 或 Webinspector 类似的工具，但能够远程运行和调试网页。因此，如果您使用过 Firefox 开发者工具或 Chrome 开发者工具等工具，那么使用 Weinre 将轻而易举。但话不多说，让我们开始使用它吧。

设置 Weinre

由于 Weinre 运行在 Node.js 之上，因此您首先需要安装 Node.js。Node.js 现在附带了 NPM（Node 包管理器），我们将使用它来安装 Weinre。在终端中运行以下命令：

npm -g install weinre

注意：-g 标志用于将 Weinre 安装为全局 Node.js 模块以实现命令行功能，但在 Linux 和 Mac 上，这意味着您很可能需要在上述命令前加上 sudo。

安装过程完成后，我们就可以使用 Weinre 进行调试了。但首先，让我们确保 Weinre 确实已成功安装。在您的终端中，运行以下命令：

$ weinre --boundHost 127.0.0.1 --httpPort 9090
2013-01-28T10:42:40.498Z weinre: starting server at http://127.0.0.1:9090

如果您看到类似于上面最后一行的内容，则表示您的安装成功，并且 Weinre 服务器已启动并正在运行。有了它，启动一个浏览器（注意：Weinre 的 UI 是专门为基于 Webkit 的浏览器构建的，因此，虽然它可能在其他浏览器中也能工作，但我建议您使用 Chrome）并将其指向http://127.0.0.1:9090

上面是 Weinre 服务器的登录页面，您可以访问文档、其他一些小工具以及 Weinre 客户端，这是我们真正想要访问的页面，因此，请继续点击调试客户端链接。

从上面您可以看到我们有一个已连接的客户端，这是 Web 检查器的当前实例，我们服务器的一些通用属性，但没有目标。让我们设置我们的目标。

注意：如果 winery 的 UI 看起来很熟悉，那是因为 Winery 使用与 Chrome 和 Safari 中的 Web 检查器相同的 UI 代码。

设置 Weinre 目标

在 Weinre 中，目标是您要调试的网页或应用，为了使目标能够连接，我们需要在应用的相关文件中添加一行代码。对于这篇文章，让我们检查日历应用。继续打开 gaia -> 应用 -> 日历 -> index.html 并滚动到最底部。在结束的 body 标记之前，插入以下行：

但是，在我们启动 B2G 桌面版并尝试之前，还有一个步骤。Gaia 使用内容安全策略，并且作为其中的一部分，脚本仅允许加载，如果来自与应用相同的来源。因此，如果我们要尝试加载日历，则上面的脚本将被阻止，因为它没有从指定的来源加载。

为了克服这个问题，我们需要暂时禁用 CSP。为此，打开 gaia -> 构建 -> preferences.js 并添加以下行，大约在第 24 行：

prefs.push(["security.csp.enable", false]);

使用 Weinre 和 B2G 桌面版进行调试

现在我们准备测试 Weinre 了。如果您尚未位于 Gaia 根目录中，请现在更改到该目录并执行：

DEBUG=1 make

配置文件构建完成后，启动 B2G 桌面版。

/Applications/B2G.app/Contents/MacOS/b2g-bin -profile /Users/username/mozilla/projects/gaia/profile

B2G 启动后，解锁屏幕，向右滑动两屏，然后点击日历图标以启动日历应用。应用启动后，您将在 Weinre 的客户端仪表板上看到一个新项目出现。

如您所见，日历已成功连接，现在被列为我们的目标之一。继续点击“元素”选项卡。

此处列出了我们应用的 HTML（左侧）和 CSS（右侧）！您可以继续像往常一样编辑 HTML 或 CSS，并查看更改实时反映。请注意，即使 CSS 看起来是灰色的并且已禁用，它也可以完全编辑。您可以使用空的 element.style 块或修改现有规则向当前元素添加全新的样式。您还会注意到您可以访问计算出的样式以及当前元素的指标。

使用控制台

我们感兴趣的下一个选项卡是控制台选项卡。在这里，您可以编写代码并运行任何您想要的 JavaScript 直接针对当前应用或执行应用公开的代码。为了了解其工作原理，让我们与拨号器的呼叫日志部分进行交互。

第一步是将我们的脚本导入从日历移动到拨号器。从日历中获取代码，然后打开 gaia -> 应用 – > 通信 -> 拨号器 -> index.html 并粘贴代码。接下来使用“make”重新构建您的配置文件，最后重新启动 B2G 桌面版。

重新启动后，点击主屏幕左下角的拨号器图标。加载完成后，通过打开http://127.0.0.1:9090/client/#anonymous并确认目标现在如下所示，确认通信通道已对 Weinre 打开。

127.0.0.1 [channel: t-7 id: anonymous] - app://communications.gaiamobile.org/dialer/index.html#keyboard-view

拨号器打开后，点击左下角的呼叫日志图标。目前呼叫日志已填充了一些虚拟数据，但让我们创建自己的数据。点击 Weinre 中的控制台选项卡，键入以下内容并按 Enter。

RecentsDBManager.deleteAll();

如果您现在查看桌面上的视图，似乎什么也没发生，但请稍等，还有更多。键入以下内容并按 Enter。

Recents.refresh();

啊哈！如您所见，我们的呼叫日志为空。下一步是添加一个条目。为此，我们将创建一个虚拟呼叫条目对象，然后将其传递给 RecentsDBManager 的 add 函数以将其存储起来。

// Dummy entry
var recentCall = {
    type: 'incoming-refused',
    number: '555-6677',
    date: new Date()
};
RecentsDBManager.add(recentCall);
Recents.refresh();

如您现在所见，我们刚刚创建的条目已添加到存储中（确切地说是IndexedDB），并且在呼叫日志视图中可见。您可能已经注意到，控制台附带的另一个很棒的功能是自动完成，这将进一步加快开发速度。

此功能组合已打开新的可能性，并且将使在 Firefox OS 上工作或为该操作系统编写应用变得更容易，从而减少在构建配置文件、拆卸和重新启动 B2G 之间花费的时间。所有这些都使得开发者更加快乐。

但是，等等，设备上的调试呢？这将与上述方法完全相同，只有一个细微的差别，即 IP。当您想在设备上进行调试时，您首先需要知道主机计算机的 IP 地址。然后，您需要使用此 IP 作为 buondHost 启动 Weinre，并在将脚本包含到目标文档中时也将其用作 IP。

在 Mac 和 Linux 上，您可以使用 ifconfig 获取此地址，在 Windows 上则使用 ipconfig。获取新的 IP 后，只需停止当前的 Weinre 实例，然后执行以下操作：

weinre --boundHost 192.168.1.1 --httpPort 9090

然后在您的目标文档中添加：

使用以下命令将您的 Gaia 配置文件制作并推送到设备：

make install-gaia

启动您的目标应用，您就可以开始使用了！

结论

虽然此解决方案并不完美，您需要记住在将任何内容提交到源代码控制之前撤消您的更改，每次都必须手动添加脚本并不是理想的，而且还有一些功能无法 100% 工作，例如，将鼠标悬停在 HTML 源代码上时突出显示 DOM 元素以及使用断点等调试 JavaScript，但这确实在很大程度上改善了开发人员的生活，无论他们是在直接处理 Gaia 还是在为 Firefox OS 编写激动人心的新应用。

但是，在手动管理脚本注入、禁用 CSP 和确保在推送到源代码控制之前清理内容方面，已经出现了一些曙光。Jan Jongboom 已针对 Gaia 存储库提交了一个拉取请求，该请求看起来非常有希望，并将缓解很多问题，因此，请继续为他提供帮助，让我们将其合并到 Gaia 中。祝您开发愉快！

重要说明：如果没有 Kevin Grandon 想起使用 Weinre 并发送了启动该项目的电子邮件，以上所有事情都不会发生。感谢 Kevin！