远程调试 Android 设备

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

远程调试示意图

第 1 步：发现您的 Android 设备

下面的工作流程适用于大多数用户。如需更多帮助，请参阅问题排查：DevTools 检测不到 Android 设备。

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

  5. 确保已启用 复选框。 发现 USB 设备。

    “Discover USB Devices”复选框处于启用状态。

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

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

    离线设备正在等待身份验证。

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

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

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

  9. 继续执行第 2 步。

问题排查：DevTools 检测不到 Android 设备

请确保正确安装硬件：

  • 如果您使用的是 USB 集线器，请尝试将 Android 设备直接连接到开发机器。
  • 尝试拔出 Android 设备与开发机之间的 USB 线，然后再将其插回原位。在 Android 设备与开发计算机的屏幕未锁定时，执行此操作。
  • 确保您的 USB 线正常工作。您应该能够从自己的开发计算机上检查 Android 设备上的文件。

请确保正确安装您的软件：

如果您的 Android 设备上未显示 Allow USB Debugging 提示，请尝试：

  • 当 DevTools 在开发机器上处于焦点状态时，断开并重新连接 USB 电缆，此时将会显示 Android 主屏幕。换言之，有时如果 Android 设备或开发计算机的屏幕锁定，则不会显示此提示。
  • 更新您的 Android 设备和开发机的显示设置，以免其进入休眠状态。
  • 将 Android 的 USB 模式设置为 PTP。请参阅 Galaxy S4 未显示“Authorize USB debugging”对话框。
  • 在 Android 设备的开发者选项屏幕上选择撤消 USB 调试授权，以将其重置为新状态。

如果您发现本节或“Chrome DevTools 设备插入时未检测到设备”中未提及的解决方案，请为该 Stack Overflow 问题添加答案，或在 developer.chrome.com 代码库中打开问题！

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

  1. 在 Android 设备上打开 Chrome。

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

    设备上运行的 Chrome 版本。

  3. 在 Open tab with url 文本框中，输入网址，然后点击 Open。此页面将在 Android 设备上的新标签页中打开。

    某个版块中列出的远程标签页。

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

  4. 点击您刚刚打开的网址旁边的检查。系统随即会打开一个新的 DevTools 实例。

远程标签页的新 DevTools 实例。

您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。因此，如果您的 Android 设备正在运行一个非常旧的 Chrome 版本，则 DevTools 实例看上去可能与您常用的实例有很大的差别。

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

在网址下方，您可以找到用于暂停、聚焦、重新加载或关闭标签页的菜单。

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

检查元素

前往 DevTools 实例的 Elements 面板，将鼠标悬停在一个元素上以在 Android 设备的视口中突出显示该元素。

您还可以在 Android 设备屏幕上点按一个元素，以在 Elements 面板中选择该元素。 点击 DevTools 实例上的 Select Element 选择元素，然后在 Android 设备屏幕上点按相应元素。请注意，选择元素将在第一次触摸后停用，因此，每次想要使用此功能时，您都需要重新启用它。

将 Android 屏幕抓屏到您的开发机上

点击 Toggle Screencast 开启/关闭抓屏功能 以在您的 DevTools 实例中查看 Android 设备的内容。

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

  • 将点击转变为点按，在设备上触发适当的触摸事件。
  • 将计算机上的按键发送至设备。
  • 如需模拟双指张合手势，请在拖动时按住 Shift 键。
  • 如需滚动，请使用触控板或鼠标滚轮，或者使用鼠标指针抛式滚动。

关于抓屏的一些注意事项：

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

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

在极少数情况下，使用其他远程调试方法可能很有用。例如，您可能需要直接连接到 Android 版 Chrome 的 Chrome DevTools Protocol (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 文档所示。
    • 系统会填充 chrome://inspect/#devices，即使未选中发现 USB 设备设置也是如此。

如需进行问题排查，请参阅：