远程调试 Android 设备

凯切·巴斯克斯
Kayce Basques
Twitter GitHub Glitch
索菲亚·埃梅利安诺娃
Sofia Emelianova
GitHub

从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。本教程将教您如何：

  • 设置您的 Android 设备以进行远程调试，并从开发机器上发现设备。
  • 从开发机器检查和调试 Android 设备上的实时内容。
  • 将 Android 设备上的内容抓屏到开发机器上的开发者工具实例中。

远程调试示意图

第 1 步：找到您的 Android 设备

以下工作流程适用于大多数用户。如需更多帮助，请参阅问题排查：开发者工具未检测到 Android 设备。

  1. 在 Android 设备上打开开发者选项屏幕。请参阅配置设备上的开发者选项。
  2. 选择启用 USB 调试。
  3. 在开发机器上，打开 Chrome。
  4. 转到 chrome://inspect#devices。

  5. 确保 复选框。 发现 USB 设备处于启用状态。

    已启用“Discover USB Devices”复选框。

  6. 使用 USB 线将 Android 设备直接连接到开发机器。

  7. 如果您是首次连接您的设备，该设备将显示为“离线”且待身份验证。

    离线设备待进行身份验证。

    在这种情况下，请接受设备屏幕上的调试会话提示。

  8. 如果您看到 Android 设备的型号名称，则表示开发者工具已成功与您的设备建立连接。

    已成功连接的设备，指定了型号名称。

  9. 请继续执行第 2 步。

问题排查：开发者工具没有检测到 Android 设备

确保您的硬件设置正确：

  • 如果您使用的是 USB 集线器，请尝试将您的 Android 设备直接连接到开发机器。
  • 尝试拔出 Android 设备与开发机器之间的 USB 线，然后再重新插上。在 Android 和开发机器的屏幕处于解锁状态时执行此操作。
  • 确保您的 USB 线能够正常使用。您应该能够从开发机器上检查 Android 设备上的文件。

确保您的软件已正确设置：

如果您的 Android 设备上没有显示允许 USB 调试提示，请尝试以下方法：

  • 当开发者工具位于开发机器中，并且系统显示 Android 主屏幕时，拔掉并重新连接 USB 线。换句话说，有时当 Android 或开发机器的屏幕处于锁定状态时，系统不会显示提示。
  • 更新 Android 设备和开发机器的显示设置，使其永远不会进入休眠状态。
  • 正在将 Android 的 USB 模式设置为 PTP。请参阅 Galaxy S4 不显示“授权 USB 调试”对话框。
  • 从 Android 设备的开发者选项屏幕中选择撤消 USB 调试授权，以将其重置为新状态。

如果您发现本部分或 Chrome 开发者工具设备在插入时检测不到设备中未提及的解决方案，请在该 Stack Overflow 问题中添加答案，或在 developer.chrome.com 代码库中提交问题！

第 2 步：从开发机器调试 Android 设备上的内容

  1. 在 Android 设备上打开 Chrome。

  2. 在开发机器上的 chrome://inspect/#devices 中，您会看到 Android 设备的型号名称，后跟其序列号。再往下，您可以看到设备上运行的 Chrome 版本，版本号附在括号中。

    设备上运行的 Chrome 版本。

  3. 在使用网址打开标签页文本框中，输入网址，然后点击打开。该页面会在 Android 设备上的新标签页中打开。

    某个部分中列出的远程标签页。

    每个远程 Chrome 标签页在 chrome://inspect/#devices 中都有专属的部分。您可以在此部分与该标签页互动。如果有任何使用 WebView 的应用，您也会看到每个应用对应的区域。在此示例中，只打开了一个标签页。

  4. 点击您刚刚打开的网址旁边的检查。将打开一个新的开发者工具实例。

远程标签页的新开发者工具实例。

您的 Android 设备上运行的 Chrome 版本决定了开发机器上打开的开发者工具的版本。因此，如果您的 Android 设备运行的是非常旧的 Chrome 版本，则开发者工具实例看上去可能会与您所熟悉的实例截然不同。

更多操作：暂停、聚焦、重新加载或关闭标签页

网址下方会显示一个菜单，用于暂停、聚焦、重新加载或关闭标签页。

用于暂停、重新加载、聚焦或关闭标签页的菜单。

检查元素

前往您的开发者工具实例的 Elements 面板，将鼠标悬停在某个元素上，以在 Android 设备的视口中突出显示该元素。

您还可以在 Android 设备屏幕上点按某个元素，以在 Elements 面板中选择该元素。 点击开发者工具实例上的 Select Element 图标 选择元素，然后在 Android 设备屏幕上点按该元素。请注意，选择元素将在首次触摸后停用，因此每次想要使用此功能时，您都需要重新启用。

将 Android 屏幕抓屏到开发机器

点击 Toggle Screencast 图标 开启/关闭抓屏，以在开发者工具实例中查看 Android 设备的内容。

您可以通过多种方式与抓屏互动：

  • 点击会转换成点按，从而在设备上触发适当的触摸事件。
  • 将计算机上的按键发送至设备。
  • 如需模拟双指张合手势，请在按住 Shift 键的同时拖动。
  • 要滚动，请使用触控板或鼠标滚轮，或者用鼠标指针快速滑动。

关于抓屏的一些说明：

  • 抓屏仅显示页面内容。抓屏的透明部分表示设备接口，例如 Chrome 地址栏、Android 状态栏或 Android 键盘。
  • 抓屏会对帧速率产生负面影响。在测量滚动或动画时停用抓屏，以更准确地了解网页的性能。
  • 如果您的 Android 设备屏幕锁定，您的抓屏内容将消失。解锁 Android 设备屏幕即可自动继续抓屏。

通过 Android 调试桥 (adb) 手动调试

在极少数情况下，一种远程调试的替代方法可能很有用。例如，您可能希望直接连接到 Android 版 Chrome 的 Chrome 开发者工具协议 (CDP)。

为此，您可以使用 Android 调试桥 (adb)：

  1. 请务必在 Android 设备上启用开发者选项和 USB 调试。
  2. 在 Android 设备上打开 Chrome。

  3. 通过以下方式将 Android 设备连接到开发机器：

  4. 在开发机器的命令行中，运行 adb devices -l 并检查您的设备是否在列表中。

  5. 将设备上的 CDP 套接字转发到计算机的本地端口，例如 9222。如需完成此操作，请运行以下命令：

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. 成功连接后，您会看到：

    • http://localhost:9222/json 会列出您的 page 目标。
    • http://localhost:9222/json/version 公开 browser 目标端点，如 CDP 文档所示。
    • 即使未选中发现 USB 设备设置，系统仍会填充 chrome://inspect/#devices。

有关问题排查的信息，请参阅：