使用 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

检查设备示例:

Chrome 检查设备

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

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

设备上访问站点的效果:

设备截图

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

设备上 Inspect 效果图:

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 代理示例:

设置WiFi代理

在 Android 设备上访问效果图:

Android 设备直接访问自定义域名

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

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

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

作者: 袖之欢

科技改变生活,编程改变世界。

《使用 Chrome 在 Android 设备上进行网页调试》有一个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注