远程调试 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 设备。

    “发现 USB 设备”复选框处于启用状态。

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

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

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

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

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

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

  9. 继续执行第 2 步。

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

确保您的硬件设置正确无误：

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

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

如果您在 Android 设备上没有看到 Allow USB Debugging 提示，请尝试执行以下操作：

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

如果您发现本部分或Chrome DevTools 设备在插入时无法检测到设备中未提及的解决方案，请为该 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. 点击您刚刚打开的网址旁边的检查。系统会打开一个新的 DevTools 实例。

远程标签页的新 DevTools 实例。

Android 设备上运行的 Chrome 版本决定了开发机器上打开的 DevTools 版本。因此，如果您的 Android 设备运行的是非常旧的 Chrome 版本，开发者工具实例可能与您习惯的样子截然不同。

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

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

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

检查元素

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

您还可以点按 Android 设备屏幕上的元素，在元素面板中选择该元素。 在您的 DevTools 实例中，点击 Select Element（选择元素）图标 选择元素，然后点按 Android 设备屏幕上的元素。请注意，选择元素会在首次触摸后停用，因此您每次需要使用此功能时都需要重新启用它。

将 Android 屏幕投屏到开发机器

点击 Toggle Screencast（切换屏幕截图）图标 开启/关闭抓屏功能，即可在开发者工具实例中查看 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 设备设置也是如此。

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