远程调试Android设备

在Windows,Mac 或 Linux 上远程调试 Android 设备上的实时内容。

remote debugging illustration

TL;DR

  • 设置你的Android设备进行远程调试,并从开发机中发现它。
  • 从您的开发机器检查和调试Android设备上的实时内容。
  • 将来自Android设备的内容屏播到DevTools。

要求

在开始远程调试之前,您需要︰

  • 在开发机上安装 chrome 32 或更高版本。
  • 如果你使用的 Windows,请安装 USB 驱动程序到你的开发机上。(并且确保Device Manager(设备管理器)报告的 USB 驱动程序正确)
  • 用USB数据线将你的 Android 手机连接到您的开发机上。
  • Android 4.0 或更高版本。
  • Android设备上安装Android版的chrome。

在 Android 设备上启用 USB 调试

在您的Android设备上,打开Settings(设置),找到Developer options(开发人员选项)部分,并启用USB debugging(USB调试)。如果您运行的是Android 4.2或更高版本,并且无法找到Developer options(开发人员选项),您可能需要启用它

连接并发现 Android 设备

在您的开发机上,打开Chrome。您需要登录到其中一个用户配置(user profiles)。远程调试在隐身或访客模式下不起作用。

打开DevTools 主菜单 并选择More tools(更多工具)>Inspect devices(检查设备)。

opening the inspect devices dialog

从这里可以看到所有连接的远程设备的状态。如果当前没有连接任何设备,因此你看到的对话框应该类似于下面的截图。确保启用Discover USB devices(发现 USB 设备)。

empty inspect devices dialog

使用USB数据线将Android设备连接到开发机。您应该将Android设备直接连接到开发机,不要通过任何中间 hub(集线器)。

如果这是您第一次将此Android设备连接到此开发机,您应该在Inspect Devices(检查设备)对话框中看到一个未授权的未知设备。

pending authorization

如果是这种情况,那么您需要在Android设备上打开Allow USB debugging(允许USB调试)提示并授予权限。

提示︰ 如果您在发现设备过程中遇到任何问题,您可以重新开始该过程,返回到Developer options(开发人员选项),然后点击Revoke USB debugging authorizations(撤消USB调试授权)。

Allow USB debugging(允许USB调试)后,您应该可以在Inspect Devices(检查设备)对话框中看到你的设备了。

inspect devices dialog with connection

在开发机中调试 Android 设备上的内容

Inspect Devices(检查设备)对话框中,从左侧的菜单中选择你的设备。

inspecting a device

从这里,您可以看到有关你连接的Android设备的各种信息:

  • 在顶部,您可以看到Android设备的型号名称,后面是其序列号(例如,Nexus 5 #08ae8c2700f43a61)。
  • 如果一个或多个Chrome标签页已打开,那么您会看到一个Chrome标题,后面是正在运行的Chrome版本号(例如,Chrome (49.0.2623.105))。如果没有打开Chrome标签页,您将看不到Chrome标题。
  • 在Chrome标题下,每个打开的标签页都有自己的标题。您可以从此部分与该标签页进行交互。
  • 如果有任何正在运行的应用程序使用WebView,您会看到每个应用程序的标题。

要打开新的Chrome标签页,请在Chrome标题下的文本字段中输入网址,然后点击Open(打开)。新标签页将自动打开并加载指定的URL。

reload(重新加载),focus(获取焦点)或close(关闭)打开的标签页,单击inspect(检查)按钮旁边的more options(更多选项)图标。

reload, focus, or close a tab

当你想在开发机上打开DevTools并检查或调试Android设备上实时内容的时候,单击要检查或调试的标签页旁边的inspect(检查)按钮。DevTools会在你的开发机器上打开一个新实例。

devtools instance for remote content

注意︰  Android设备上的Chrome版本决定了开发机器上在远程调试期间使用的 DevTools 的版本。因此,开发机器上的DevTools窗口可能看起来不同于你曾经使用过的版本。

当您在Elements(元素)面板中悬停或选择元素时,该元素在Android设备上会突出显示。

您也可以 tap(轻触) Android设备的屏幕,来选择元素。首先,在DevTools中单击select element(选择元素)按钮(选择元素按钮),然后在Android设备屏幕上 tap(轻触) 。元素会在DevTools的Elements(元素)面板中被选中。请注意,select element(选择元素)按钮在第一次触摸后会被自动禁用,因此你在每次使用此功能时需要重新启用它。

屏播 Android 设备到开发机

启用toggle screencast(切换屏播)按钮(toggle screencast button)可在你的DevTools窗口中查看Android设备上内容的屏幕录像。

screencasted android device content in devtools

屏播仅显示页面内容。屏播的透明部分表示设备接口,例如Chrome多功能框,Android状态栏,或Android键盘。

注意︰  屏播是持续的帧捕获,如果您的测试对帧速率敏感度,所以你应该禁用屏播。

您可以使用多种方式与屏播交互︰

  • 点击事件 会被转换为 tap(轻触)事件,发送至设备上触发正确的触摸事件。
  • 开发机上的键盘事件会发送到安卓设备。
  • 要模拟 pinch(捏) 手势,请在拖动时按住Shift键。
  • 若要滚动,请使用你的触控板或鼠标滚轮,或按住鼠标左键拖动。