转： Android 设备的远程调试入门

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

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

图 1. 远程调试可让您从本身的开发计算机上检查 Android 设备上运行的页面。

 

第 1 步：发现您的 Android 设备

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

         一、在您的 Android 设备上打开 Developer Options 屏幕。 请参阅配置设备上的开发者选项 {:.external}。

          二、选择 Enable USB Debugging。

         三、在您的开发计算机上打开 Chrome。

         四、打开 DevTools。

         五、在 DevTools 中，点击 主菜单，{:.devtools-inline} 而后选择 More tools > Remote devices。

          图 2. 经过主菜单打开 Remote Devices 标签 

       

         六、在 DevTools 中，打开 Settings 标签。

         七、确保启用 Discover USB devices 复选框。

         图 3. 启用 Discover USB Devices 复选框

         八、使用 USB 电缆将 Android 设备直接链接到您的开发计算机。 首次链接时，一般会看到 DevTools 检测到未知设备。 若是您 Android 设备的型号名称下显示绿色圆点和 Connected 文本，

               则表示 DevTools 已与您的设备成功创建链接。 继续执行第 2 步。

         图 4. Remote Devices 标签显示成功检测到待受权的未知设备

         九、若是设备显示 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 设备上的内容

         一、在 Android 设备上打开 Chrome。

         二、在 Remote Devices 标签中，点击与您的 Android 设备型号名称匹配的标签。 在此页面的顶部，您会看到您 Android 设备的型号名称，而后是序列号。

              再往下，您能够看到设备上运行的 Chrome 的版本，版本号附在括号内。 每一个打开的 Chrome 标签都有本身的区域。 您能够从区域与标签交互。

              若是有任何使用 WebView 的应用，您也会看到针对每一个应用的区域。 在图 5 中，没有打开任何标签或 WebView。

         图 5. 链接的远程设备

 

         三、在 New tab 文本框中，输入一个网址，而后点击 Open。 此页面将在 Android 设备上的新标签中打开。

         四、点击您刚刚打开的网址旁的 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 设备屏幕解锁可自动恢复抓屏。