使用 Chrome 开发者工具通过 Ghostlab 2 调试任何浏览器中的 JavaScript

以下是由 Andi Dysart 和 Ghostlab 的 Matthias Christen 撰写的一篇客座文章。当我听说新发布的 Ghostlab 2 可以做到这一点时，我印象非常深刻。我认为我们很多开发人员都使用 Chrome，因为它拥有非常好的开发者工具，并且肯定能够在其他浏览器中使用它们，甚至在移动设备上使用。为什么不呢？Chrome 开发者工具是 Blink 的一部分，而 Blink 是开源的，对吧？我们只需要一个工具来实现它。

现代桌面浏览器提供了强大的集成开发者工具，可以帮助您快速找到 CSS 或 JavaScript 问题的根源。无论是 Chrome、Firefox、Internet Explorer 还是 Safari，您都可以检查 DOM、实时应用 CSS 修改、浏览加载的脚本文件、设置断点以手动控制执行流程，以及追踪任何异常或意外行为的根本原因。

现在，虽然这对桌面浏览器来说是正确的，但当您尝试在移动设备上的浏览器中识别问题时，情况会稍微复杂一些。

移动 Web 调试选项

让我们看看您在移动调试工具方面有哪些选择。我们将首先概述如何使用 Google 和 Apple 的各自工具集在 Android 和 iOS 上检查和调试网站（为了简洁起见，我们选择将自己限制在这些平台上）。然后，我们将通过一个简单的示例介绍 Ghostlab 在远程检查和调试方面的方法。

使用供应商工具集进行调试

Goggle 的开发者工具 允许您检查在 Android 上的 Chrome 中运行的任何网页，方法是通过 USB 将 Android 设备（仅限 4.0 及更高版本）连接到您的计算机。在您的计算机上，您还需要 Chrome。要设置此功能，请在设备上启用 USB 调试，并在计算机的 Chrome 中浏览到 `chrome://inspect` 以发现该设备。在您允许桌面访问该设备后，您可以检查和调试在设备上的 Chrome 中查看的任何网页。

iOS 也支持此功能，即 Safari 到 Safari。您还需要使用 USB 将设备连接到计算机。在设备上的高级 Safari 设置中，启用“Web 检查器”选项。然后打开计算机上的 Safari，在“开发者”菜单中，您将看到当前通过电缆连接到计算机的 iOS 设备列表。对于每个设备，您都可以检查和调试在 Safari 中显示的任何网页。

因此，假设对于两个流行的平台，都存在在设备上检查您的网站的方法——尽管存在一些限制。在 Android 上，它在 4.0 以下版本中不起作用。此外，您只能检查在 Chrome 中运行的页面——如果您在其他移动浏览器中遇到问题，这将不够用。iOS 上的情况类似，您只能检查移动 Safari。当然，您需要一台 Mac 才能做到这一点。

除了这些限制之外，您基本上需要为每个目标平台设置一个单独的工具集——一个用于 iOS 上的 Safari，一个用于 Android 上的 Chrome。即使您能为每个平台找到一个工具集，您也需要设置所有这些工具集，弄清楚如何使用它们——这还没有考虑您必须将每个设备都通过电缆连接到计算机。

其他选项

为移动设备浏览器添加开发工具是最近才出现的。在此之前，您可以（现在仍然可以）使用 weinre（“WEb INspector REmote”），这是一个在移动调试方面非常流行的项目。要使用 weinre，您需要在要调试的页面中添加一个脚本，并在命令行中启动 weinre 服务器。不幸的是，weinre 不支持一些 CSS 功能，例如伪元素、媒体查询或导入规则，也不支持 JavaScript 调试。

Ghostlab

Ghostlab（可在 Mac 和 Windows 上运行）代理您要测试的站点（来自本地文件系统或远程 URL），并允许任意数量的客户端（浏览器或设备）同时连接到该站点。然后，它将使所有客户端保持同步——这意味着，如果您使用桌面浏览器进行测试运行，您执行的所有操作（滚动、点击链接、填写表单等）都将在所有连接的客户端上复制。

除了同步测试之外，Ghostlab 还附带了 Google Chrome 的开发者工具。但我们并没有简单地包含它们，而是对其进行了相当大的调整：除了常规的 CSS 检查之外，您还可以同步检查多个客户端：当您以任何方式修改 DOM 或 CSS 样式时，您的更改将复制到所有连接的客户端。您甚至可以远程调试任何连接客户端上的 JavaScript。

Ghostlab：远程 DOM 检查

Ghostlab 运行并通过点击播放按钮启动服务器后，您可以通过点击火箭按钮连接默认浏览器，并通过输入 Ghostlab 服务器 URL 或使用方便的弹出式 QR 码连接移动设备。

现在您已经连接了多个客户端，让我们检查它们。在任何列出的客户端上，您可以通过点击检查器图标（</>）开始检查。

启动检查器后，您将看到熟悉的 Chrome 开发者工具。不过，有两个选项有所不同：您可以启用或禁用同步检查，以及启用或禁用 JavaScript 调试。

让我们从 DOM 检查开始。在“元素”部分，选择要进行更改的任何 DOM 元素，然后进行更改；例如，编辑其 CSS 样式或修改节点属性或文本。如果您启用了同步检查，您所做的修改将传输到所有连接的客户端——如果禁用了同步检查，它将仅应用于您当前正在检查的客户端。

这是一个展示其工作原理的视频

Ghostlab：远程 JavaScript 调试

要在任何连接的客户端上调试 JavaScript，请勾选“调试 JavaScript”复选框。这将导致客户端重新加载其当前正在查看的页面的 JavaScript。脚本代码由 Ghostlab 转换以允许远程调试。由于这会导致性能下降，因此我们不会默认启用它，而仅在您明确需要时启用它。

加载转换后的 JavaScript 后，调试的工作方式与您预期的一样，包括在控制台中评估 JavaScript 代码、检查和监视变量等。转到脚本选项卡，选择您选择的脚本文件，并在您感兴趣的位置设置断点。（Ghostlab 不会转换每个文件；出于性能方面的考虑，它会保留一个脚本黑名单，默认情况下包括主要的 JavaScript 库。如果 Ghostlab 不允许您设置断点，则该文件可能已被列入黑名单，您需要在 Ghostlab 的首选项中将您感兴趣的文件列入白名单。）

在这个简单的示例中，我们有两个按钮，其中一个将触发四个表格单元格重新着色，另一个将导致错误尝试执行相同的任务。

查看 Vanamco 在 CodePen 上创建的 Pen yymJWG（@vanamco）。

结论

尽管浏览器特定的工具已经消除了移动调试的一些痛点，但仍然存在一些限制，并且需要进行设置。使用 Ghostlab，无需任何特殊设置，即可轻松上手。