远程调试 Android 设备

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

在 Windows、Mac 或 Linux 计算机上远程调试 Android 设备上的实时内容。本教程将介绍如何执行以下操作：

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

远程调试图

第 1 步：发现 Android 设备

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

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

  5. 确保已启用 复选框。 Discover USB devices。

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

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

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

    离线设备待验证。

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

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

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

  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 设备屏幕上的元素，以在元素面板中选择该元素。 在开发者工具实例中点击选择元素图标 选择元素，然后在 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 文档所示。
    • 即使未勾选发现 USB 设备设置，chrome://inspect/#devices 也会填充。

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