标签： 调试

通过 Firefox 提供的开发者工具——远程调试安卓版Firefox浏览器，能够实现在是 PC 浏览器上调试手机浏览器中的网页。相比较通过使用 Chrome 在 Android 设备上进行网页调试，配置过程略复杂一点。

原文地址：Remote Debugging on Android with Chrome。

上述地址若打不开请另存为 PDF 文件或网页截图。

远程调试支持：

• 调试浏览器网页
• 调试应用内 WebView
• 实时同步投影并响应操作
• 通过端口转发在设备上直接访问开发机

调试准备：

• Chrome 32+
• 数据线 —— 连接 Android 和 电脑
• 调试浏览器网页 —— Android 4.0+、Chrome for Android
• 调试应用内 WebView —— Android 4.4+、设置 WebView 支持调试

注1：:电脑上的 Chrome 需要比 Android 上的 Chrome 版本高，可以使用 Chrome Canary 或者 Chrome Dev。

注2：通过 webview 的 setWebContentsDebuggingEnabled 方法设置 WebView 支持调试，该方法在 Build.VERSION_CODES.KITKAT (含)以上即 Android 4.4+ 有效，此方法与 Android 应用的 manifest 文件中的 debuggable 参数无关。

调试示例：

开启远程调试步骤：

1. 激活 Android 设备 USB 调试：进入 设置 -> 开发者选项，勾选 USB 调试，紧接着可能会有弹框提示，询问是否允许使用USB调试，点击确定。
2. 使用数据线连接 Android 设备和电脑，第一次连接会提示正在安装驱动，可以稍等一段时间。
3. 激活 Chrome 检查设备功能，进入 菜单 -> 更多工具 -> 检查设备，如果此时在 Android 设备上打开了 Chrome 浏览器，就可以在电脑上看到设备列表。

注3：中文版本的 Android 应该都可以在设置里面看到开发者选项，英文版本的 Android 设备原生系统 4.2+ 默认隐藏了 Developer options，请进入 Settings -> About phone， 连续轻击 Build number 7 次，再返回设置界面，可以看到 Developer options。

检查设备示例：

在 Inspect 界面有几个按钮 inspect、focus tab、reload、close，点击可以进行操作 Android 浏览器，其中主要的功能 inspect 与电脑上的 Inspect element 功能是一样的。

特别说明：如果点击 inspect 按钮打开的 Chrome DevTools 对话框一直显示空白，那多半是 appspot.com 被墙了。请使用代理在新窗口访问 appspot.com，之后会重定向到 Google 登录界面，登录 Google 账户之后可以取消代理，再次回到检查设备界面，点击 inspect 即可。

设备上访问站点的效果：

如果开启了 WebView 调试，在 Inspect 界面可以看到类似 WebView in com.zhengxianjun.dinner7字样。

设备上 Inspect 效果图：

注4：如果鼠标点击无法展开/合并标签，不妨换光标右键/左键试一下。

实时投影：

某些场景可能并不方便同时注视手机屏幕和电脑屏幕，此时可以使用实时投影把手机屏幕投射到电脑上。在一台设备上的操作都会实时响应到另外一台设备。点击 Screencast 按钮，开启实时投影（在低配手机上效果非常差，不要抱太大期望）。Android 4.4.3+ 支持应用内 WebView 实时投影。该功能性能消耗较高。以下为截图示例：

视频演示地址：https://www.youtube.com/watch?v=Q7rEFEMpwe4。可能打不开。

以上的例子都是 Android 设备直接访问公网地址，但很有可能需要在开发机上调试，此时 出于某些原因，Android 设备可能不能迅速方便地访问到开发机。Chrome 提供一种叫做端口转发的功能 —— 在手机上访问手机本机的指定端口，效果等同于手机直接访问指定 IP 和端口。

开启端口转发步骤：

1. 进入 chrome://inspect
2. 点击 Port Forwarding
3. 在弹出对话框的左侧输入 Android 设备能够访问的端口，在右侧输入需要转发到的端口
4. 勾选 Enable port forwarding 并确定

端口转发示例图：

端口转发效果图：

在手机上访问 localhost:8080 实际上是访问到开发机的 127.0.0.1:8080 端口。如果无法访问 8080 端口，请在 Web 服务器配置文件中增加监听 8080 端口。例如在 Apache 的 httpd.conf 文件中增加 Listen 8080。

最后一步重点：

在实际应用中，并不仅仅只访问 localhost，可能还需要通过自定义域名（这种域名一般在非开发机无法访问）访问到开发机。因此需要临时设置手机 WiFi，使手机网络的所有访问均通过 WiFi 指定端口代理访问，从而达到在手机上直接访问自定义域名。

进入 Settings -> WiFi，选择已连接的网络，修改代理为手动，并且填写 127.0.0.1 作为主机名、10000 作为端口。

设置 WiFi 代理示例：

在 Android 设备上访问效果图：

至此就可以在 Android 设备上较为方便地访问开发机。

如果想要在 iPhone 上进行调试，则需要使用 Mac 版本的 Chrome 进行操作。

注5：目前在 Android 上除了可以使用 Chrome for Android 进行调试，也可以使用 UC 浏览器开发者版进行调试，操作类似。