从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。 本教程将向您展示如何:
- 设置您的 Android 设备进行远程调试,并从开发计算机上发现设备。
- 从您的开发计算机检查和调试 Android 设备上的实时内容。
- 将 Android 设备上的内容抓屏到您的开发计算机上的 DevTools 实例中。
图 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。
图 2. 通过主菜单打开 Remote Devices 标签
6、在 DevTools 中,打开 Settings 标签。
7、确保启用 Discover USB devices 复选框。
图 3. 启用 Discover USB Devices 复选框
8、使用 USB 电缆将 Android 设备直接连接到您的开发计算机。 首次连接时,通常会看到 DevTools 检测到未知设备。 如果您 Android 设备的型号名称下显示绿色圆点和 Connected 文本,
则表示 DevTools 已与您的设备成功建立连接。 继续执行第 2 步。
图 4. Remote Devices 标签显示成功检测到待授权的未知设备
9、如果设备显示 Unknown,则根据 Android 设备上的权限提示接受 Allow USB Debugging。
问题排查:DevTools 检测不到 Android 设备
请确保正确安装硬件:
- 如果是使用 USB 集线器,请尝试将您的 Android 设备直接连接到开发计算机上。
- 尝试拔出 Android 设备与开发计算机之间的 USB 电缆,然后再将其插回原位 。 在 Android 设备与开发计算机的屏幕未锁定时,执行此操作。
- 确保您的 USB 电缆正常工作。 您应该能够从自己的开发计算机上检查 Android 设备上的文件。
请确保正确安装您的软件:
- 如果开发计算机运行的是 Windows 系统,请尝试为 Android 设备手动安装 USB 驱动程序。 请参阅安装原始设备制造商 (OEM) USB 驱动程序。
- 某些 Windows 和 Android 设备(特别是 Samsung)组合需要额外的设置。 请参阅 Chrome DevTools 设备插入时未检测到设备。
如果您的 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 设备屏幕解锁可自动恢复抓屏。
原文地址:https://www.cnblogs.com/wind-wang/p/11287690.html