Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Android 设备的远程调试入门

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

  • 设置您的 Android 设备进行远程调试,并从开发计算机上发现设备。
  • 从您的开发计算机检查和调试 Android 设备上的实时内容。
  • 将 Android 设备上的内容抓屏到您的开发计算机上的 DevTools 实例中。
远程调试可以让您从自己的开发计算机上检查 Android 设备上运行的页面。
图 1. 远程调试可以让您从自己的开发计算机上检查 Android 设备上运行的页面。

第 1 步:发现您的 Android 设备

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

  1. 在您的 Android 设备上打开 Developer Options 屏幕。 请参阅配置设备上的开发者选项 {:.external}。
  2. 选择 Enable USB Debugging
  3. 在您的开发计算机上打开 Chrome。
  4. 打开 DevTools
  5. 在 DevTools 中,点击 主菜单 主菜单,{:.devtools-inline} 然后选择 More tools > Remote devices

    通过主菜单打开 Remote Devices 标签。
    图 2. 通过主菜单打开 Remote Devices 标签

  6. 在 DevTools 中,打开 Settings 标签。

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

    启用 Discover USB Devices 复选框。

    图 3. 启用 Discover USB Devices 复选框

  8. 使用 USB 电缆将 Android 设备直接连接到您的开发计算机。 首次连接时,通常会看到 DevTools 检测到未知设备。 如果您 Android 设备的型号名称下显示绿色圆点和 Connected 文本,则表示 DevTools 已与您的设备成功建立连接。 继续执行第 2 步

    Remote Devices 标签显示成功检测到待授权的未知设备。

    图 4. Remote Devices 标签显示成功检测到待授权的未知设备

  9. 如果设备显示 Unknown,则根据 Android 设备上的权限提示接受 Allow USB Debugging

问题排查: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 设备的 Developer Options 屏幕上选择 Revoke USB Debugging Authorizations,以将其重置为新状态。

如果您发现本节或 Chrome DevTools 设备插入时未检测到设备中未提及的解决方案, 请在 Stack Overflow 问题下添加答案,或者在 webfundamentals 存储库中提出问题

第 2 步:从您的开发计算机调试 Android 设备上的内容

  1. 在 Android 设备上打开 Chrome。
  2. Remote Devices 标签中,点击与您的 Android 设备型号名称匹配的标签。 在此页面的顶部,您会看到您 Android 设备的型号名称,然后是序列号。 再往下,您可以看到设备上运行的 Chrome 的版本,版本号附在括号内。 每个打开的 Chrome 标签都有自己的区域。 您可以从区域与标签交互。 如果有任何使用 WebView 的应用,您也会看到针对每个应用的区域。 在图 5 中,没有打开任何标签或 WebView。

    连接的远程设备。
    图 5. 连接的远程设备

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

  4. 点击您刚刚打开的网址旁的 Inspect。 新的 DevTools 实例随即打开。 您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。 因此,如果您的 Android 设备正在运行一个非常旧的 Chrome 版本,则 DevTools 实例看上去可能与您常用的实例有很大的差别。

更多操作:重新加载、聚焦或关闭一个标签

点击您要重新加载、聚焦或关闭的标签旁的 More Options 更多选项

重新加载、聚焦或关闭标签的菜单。
图 6. 重新加载、聚焦或关闭标签的菜单

检查元素

转到您的 DevTools 实例的 Elements 面板,将鼠标指针悬停在一个元素上以在 Android 设备的视口中突出显示该元素。

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

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

点击 Toggle Screencast 切换抓屏,{:.devtools-inline} 以在您的 DevTools 实例中查看 Android 设备的内容。

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

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

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

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

反馈

Was this page helpful?