远程调试 Android 设备

Kayce Basques
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. 确保已启用 复选框。 发现 USB 设备。

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

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

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

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

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

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

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

  9. 请继续执行第 2 步。

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

确保正确设置硬件：

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

确保您的软件设置正确：

如果您的 Android 设备上未出现允许 USB 调试提示，请尝试执行以下操作：

  • 在开发者工具专注于您的开发时，断开并重新连接 USB 线 屏幕上会显示 Android 主屏幕。也就是说，有时 在 Android 设备或开发计算机的屏幕处于锁定状态时启动。
  • 更新 Android 设备和开发计算机的显示设置，使其永不更新 去睡觉。
  • 正在将 Android 的 USB 模式设为 PTP。请参阅 Galaxy S4 不显示“授权 USB 调试”对话框 方框。
  • 在应用的开发者选项屏幕中，选择撤消 USB 调试授权 Android 设备，以将其重置为全新状态。

如果您发现本部分或 Chrome DevTools 设备未提及任何解决方案， 检测设备（插入时检测设备），请针对相应 Stack Overflow 问题添加答案，或打开一个 出现了问题！

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

  1. 在 Android 设备上打开 Chrome。

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

    设备上运行的 Chrome 版本。

  3. 在通过网址打开标签页文本框中，输入网址，然后点击打开。该网页会以 打开新的标签页

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

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

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

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

您的 Android 设备上运行的 Chrome 的版本决定了在开发计算机上打开的开发者工具的版本。因此，如果您的 Android 设备运行的是非常旧的 Chrome 版本，那么开发者工具实例在外观上可能与您常用的实例有很大不同。

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

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

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

检查元素

转到开发者工具实例的 Elements 面板，然后将鼠标悬停在某个元素上以将其突出显示 Android 设备的视口。

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

将 Android 屏幕抓屏到开发机器上

点击切换抓屏 开启/关闭“抓屏”功能 次查看 在开发者工具实例中查看您的 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 目标。
    • 如 CDP 文档所述，http://localhost:9222/json/version 公开了 browser 目标端点。
    • 即使未勾选发现 USB 设备设置，系统也会填充 chrome://inspect/#devices。

如需排查问题，请参阅：