从 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 设备。请参阅安装原始设备制造商 (OEM) USB 驱动程序。
- 某些 Windows 和 Android 设备(尤其是三星设备)组合需要额外的设置。请参阅 Chrome 开发者工具设备在插入后未检测到设备。
如果您的 Android 设备上未出现允许 USB 调试提示,请尝试执行以下操作:
- 在开发者工具专注于您的开发时,断开并重新连接 USB 线 屏幕上会显示 Android 主屏幕。也就是说,有时 在 Android 设备或开发计算机的屏幕处于锁定状态时启动。
- 更新 Android 设备和开发计算机的显示设置,使其永不更新 去睡觉。
- 正在将 Android 的 USB 模式设为 PTP。请参阅 Galaxy S4 不显示“授权 USB 调试”对话框 方框。
- 在应用的开发者选项屏幕中,选择撤消 USB 调试授权 Android 设备,以将其重置为全新状态。
如果您发现本部分或 Chrome DevTools 设备未提及任何解决方案, 检测设备(插入时检测设备),请针对相应 Stack Overflow 问题添加答案,或打开一个 出现了问题!
第 2 步:通过开发机器调试 Android 设备上的内容
- 在 Android 设备上打开 Chrome。
在开发机器上的
chrome://inspect/#devices
中,您会看到 Android 设备的型号名称,后跟 序列号。再往下,您可以看到设备上运行的 Chrome 版本 相应的版本号在通过网址打开标签页文本框中,输入网址,然后点击打开。该网页会以 打开新的标签页
每个远程 Chrome 标签页在
chrome://inspect/#devices
中都有专属部分。您可以在此部分与该标签页互动。如果有任何使用 WebView 的应用,您也会看到针对每个应用的版块。在本例中,系统只打开了一个标签页。点击您刚刚打开的网址旁边的检查。一个新的开发者工具实例随即打开。
您的 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):
- 请务必在您的 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
文档您也可以选择阅读旧版指南: