Android设备的远程调试

《使用Fiddler调试手机应用》一文从优化和数据分析的角度讲解了手机应用的调试。但如果要断点调试Html5应用的代码呢?也许聪明的您要说用浏览器自带的开发者工具不就行了。但有时这是行不通的。比如说加入了微信支付的模块,只能在微信调试,难道只能在手机端通过alert来测试。借助Chrome开发者工具远程调试可以解决这一难题。

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

  • 设置您的 Android 设备进行远程调试,并从开发计算机上发现设备。
  • 从您的开发计算机检查和调试Android设备上的实时内容。
  • 将 Android 设备上的内容抓屏到您的开发计算机上的DevTools实例中。

第 1 步:发现您的Android设备

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

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

6. 在DevTools中,打开Settings标签。
7. 确保启用Discover USB devices复选框。

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

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

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

1.在 Android 设备上打开 Chrome。

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

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

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

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

检查元素

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

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

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

点击Toggle Screencast切换抓屏,以在您的DevTools实例中查看Android设备的内容。
您可以通过多种方式与抓屏互动:

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

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

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