从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。本教程将介绍如何执行以下操作:
- 设置 Android 设备以进行远程调试,并从开发机器上发现设备。
- 从开发机器检查和调试 Android 设备上的实时内容。
- 将 Android 设备上的内容抓屏到开发计算机上的开发者工具实例中。
第 1 步:发现您的 Android 设备
以下工作流程适用于大多数用户。如需更多帮助,请参阅问题排查:开发者工具未检测到 Android 设备。
- 在 Android 设备上打开开发者选项屏幕。请参阅配置设备上的开发者选项。
- 选择启用 USB 调试。
- 在开发机器上打开 Chrome。
- 前往
chrome://inspect#devices
。 确保已启用 发现 USB 设备。
使用 USB 线将 Android 设备直接连接到开发机器。
如果您是首次连接设备,该设备将显示为“离线”且正在等待身份验证。
在这种情况下,请接受设备屏幕上的调试会话提示。
如果您看到 Android 设备的型号名称,则表明开发者工具已成功与您的设备建立连接。
请继续执行第 2 步。
问题排查:DevTools 未检测到 Android 设备
确保正确设置硬件:
- 如果您使用的是 USB 集线器,请尝试将 Android 设备直接连接到开发机器。
- 尝试拔出 Android 设备与开发机器之间的 USB 线,然后再重新插上。在 Android 设备和开发计算机的屏幕处于解锁状态时执行此操作。
- 确保您的 USB 线正常工作。您应该能够通过开发计算机检查 Android 设备上的文件。
确保您的软件设置正确:
- 如果您的开发机器运行的是 Windows,请尝试为 Android 设备手动安装 USB 驱动程序。请参阅安装原始设备制造商 (OEM) USB 驱动程序。
- 某些 Windows 和 Android 设备(尤其是三星设备)组合需要额外的设置。请参阅 Chrome 开发者工具设备插入后未检测到设备。
如果您的 Android 设备上未出现允许 USB 调试提示,请尝试执行以下操作:
- 在开发者工具在开发机器上处于焦点状态时,断开并重新连接 USB 线,并显示 Android 主屏幕。换言之,有时当 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 connection。
在开发机器的命令行中,运行
adb devices -l
并检查您的设备是否存在于列表中。将设备上的 CDP 套接字转发到计算机的本地端口,例如
9222
。如需完成此操作,请运行以下命令:adb forward tcp:9222 localabstract:chrome_devtools_remote
成功连接后,请查看:
http://localhost:9222/json
会列出您的page
目标。- 如 CDP 文档所述,
http://localhost:9222/json/version
公开了browser
目标端点。 - 即使未勾选发现 USB 设备设置,系统也会填充
chrome://inspect/#devices
。
如需排查问题,请参阅:
adb
文档您也可以选择阅读旧版指南: