远程调试 Android 设备

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

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

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

第 1 步：发现您的 Android 设备

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

在您的 Android 设备上打开 Developer Options 屏幕。请参阅配置设备上的开发者选项。
选择 Enable USB Debugging。
在您的开发计算机上打开 Chrome。
打开 DevTools。
在 DevTools 中，点击主菜单

然后选择 More tools > Remote devices。

在 DevTools 中，打开 Settings 标签。
确保启用 Discover USB devices 复选框。

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

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

在 Android 设备上打开 Chrome。
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 将在第一次轻触后停用，因此，每次想要使用此功能时您都需要重新启用。