从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。本教程将教您如何:
- 设置您的 Android 设备以进行远程调试,并从开发机器上发现设备。
- 从开发机器检查和调试 Android 设备上的实时内容。
- 将 Android 设备上的内容抓屏到开发机器上的开发者工具实例中。
第 1 步:找到您的 Android 设备
以下工作流程适用于大多数用户。如需更多帮助,请参阅问题排查:开发者工具未检测到 Android 设备。
- 在 Android 设备上打开开发者选项屏幕。请参阅配置设备上的开发者选项。
- 选择启用 USB 调试。
- 在开发机器上,打开 Chrome。
- 转到
chrome://inspect#devices
。 确保 发现 USB 设备处于启用状态。
使用 USB 线将 Android 设备直接连接到开发机器。
如果您是首次连接您的设备,该设备将显示为“离线”且待身份验证。
在这种情况下,请接受设备屏幕上的调试会话提示。
如果您看到 Android 设备的型号名称,则表示开发者工具已成功与您的设备建立连接。
请继续执行第 2 步。
问题排查:开发者工具没有检测到 Android 设备
确保您的硬件设置正确:
- 如果您使用的是 USB 集线器,请尝试将您的 Android 设备直接连接到开发机器。
- 尝试拔出 Android 设备与开发机器之间的 USB 线,然后再重新插上。在 Android 和开发机器的屏幕处于解锁状态时执行此操作。
- 确保您的 USB 线能够正常使用。您应该能够从开发机器上检查 Android 设备上的文件。
确保您的软件已正确设置:
- 如果您的开发机器运行的是 Windows,请尝试为 Android 设备手动安装 USB 驱动程序。请参阅安装原始设备制造商 (OEM) USB 驱动程序。
- 某些 Windows 和 Android 设备(尤其是三星)组合需要进行额外设置。请参阅 Chrome 开发者工具设备在插入时检测不到设备。
如果您的 Android 设备上没有显示允许 USB 调试提示,请尝试以下方法:
- 当开发者工具位于开发机器中,并且系统显示 Android 主屏幕时,拔掉并重新连接 USB 线。换句话说,有时当 Android 或开发机器的屏幕处于锁定状态时,系统不会显示提示。
- 更新 Android 设备和开发机器的显示设置,使其永远不会进入休眠状态。
- 正在将 Android 的 USB 模式设置为 PTP。请参阅 Galaxy S4 不显示“授权 USB 调试”对话框。
- 从 Android 设备的开发者选项屏幕中选择撤消 USB 调试授权,以将其重置为新状态。
如果您发现本部分或 Chrome 开发者工具设备在插入时检测不到设备中未提及的解决方案,请在该 Stack Overflow 问题中添加答案,或在 developer.chrome.com 代码库中提交问题!
第 2 步:从开发机器调试 Android 设备上的内容
- 在 Android 设备上打开 Chrome。
在开发机器上的
chrome://inspect/#devices
中,您会看到 Android 设备的型号名称,后跟其序列号。再往下,您可以看到设备上运行的 Chrome 版本,版本号附在括号中。在使用网址打开标签页文本框中,输入网址,然后点击打开。该页面会在 Android 设备上的新标签页中打开。
每个远程 Chrome 标签页在
chrome://inspect/#devices
中都有专属的部分。您可以在此部分与该标签页互动。如果有任何使用 WebView 的应用,您也会看到每个应用对应的区域。在此示例中,只打开了一个标签页。点击您刚刚打开的网址旁边的检查。将打开一个新的开发者工具实例。
您的 Android 设备上运行的 Chrome 版本决定了开发机器上打开的开发者工具的版本。因此,如果您的 Android 设备运行的是非常旧的 Chrome 版本,则开发者工具实例看上去可能会与您所熟悉的实例截然不同。
更多操作:暂停、聚焦、重新加载或关闭标签页
网址下方会显示一个菜单,用于暂停、聚焦、重新加载或关闭标签页。
检查元素
前往您的开发者工具实例的 Elements 面板,将鼠标悬停在某个元素上,以在 Android 设备的视口中突出显示该元素。
您还可以在 Android 设备屏幕上点按某个元素,以在 Elements 面板中选择该元素。 点击开发者工具实例上的 Select Element 图标 ,然后在 Android 设备屏幕上点按该元素。请注意,选择元素将在首次触摸后停用,因此每次想要使用此功能时,您都需要重新启用。
将 Android 屏幕抓屏到开发机器
点击 Toggle Screencast 图标 ,以在开发者工具实例中查看 Android 设备的内容。
您可以通过多种方式与抓屏互动:
- 点击会转换成点按,从而在设备上触发适当的触摸事件。
- 将计算机上的按键发送至设备。
- 如需模拟双指张合手势,请在按住 Shift 键的同时拖动。
- 要滚动,请使用触控板或鼠标滚轮,或者用鼠标指针快速滑动。
关于抓屏的一些说明:
- 抓屏仅显示页面内容。抓屏的透明部分表示设备接口,例如 Chrome 地址栏、Android 状态栏或 Android 键盘。
- 抓屏会对帧速率产生负面影响。在测量滚动或动画时停用抓屏,以更准确地了解网页的性能。
- 如果您的 Android 设备屏幕锁定,您的抓屏内容将消失。解锁 Android 设备屏幕即可自动继续抓屏。
通过 Android 调试桥 (adb) 手动调试
在极少数情况下,一种远程调试的替代方法可能很有用。例如,您可能希望直接连接到 Android 版 Chrome 的 Chrome 开发者工具协议 (CDP)。
为此,您可以使用 Android 调试桥 (adb):
- 请务必在 Android 设备上启用开发者选项和 USB 调试。
- 在 Android 设备上打开 Chrome。
通过以下方式将 Android 设备连接到开发机器:
- 一根 USB 线(直线)。
- 或者,您也可以 adb Wi-Fi connect。
在开发机器的命令行中,运行
adb devices -l
并检查您的设备是否在列表中。将设备上的 CDP 套接字转发到计算机的本地端口,例如
9222
。如需完成此操作,请运行以下命令:adb forward tcp:9222 localabstract:chrome_devtools_remote
成功连接后,您会看到:
http://localhost:9222/json
会列出您的page
目标。http://localhost:9222/json/version
公开browser
目标端点,如 CDP 文档所示。- 即使未选中发现 USB 设备设置,系统仍会填充
chrome://inspect/#devices
。
有关问题排查的信息,请参阅:
adb
文档您也可以选择阅读旧版指南: