• Tags , ,         
  • 2018-03-07  14:18:51        
  • 31 °C    

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

    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(检查设备)。

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

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

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

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

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

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

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

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

    从这里,您可以看到有关你连接的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(更多选项)图标。

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

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

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

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

    屏播 Android 设备到开发机

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

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

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

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

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

    说明

    翻译自:https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

     
    转载请保留页面地址:https://www.breakyizhan.com/chromeconsole/1954.html