移动端前端开发调试

使用 Chrome 远程调试 Android 设备

手机上浏览你的 Web 网页的感觉跟你在桌面版的体验可能完全不同。Chrome DevTools 的远程调试功能可以让你用电脑连接你的安卓设备进行实时调试。

安卓远程调试支持：

调试在浏览器标签里面网站。
在原生安卓应用里面调试WebView。
可以实时截取安卓设备屏幕显示在你电脑上。
可以通过端口连接和虚拟 host 映射来连接你的电脑和安卓设备。

必要条件

想要开始远程调试，你需要：

Chrome 32 或者更新版。
一根 USB 线，用来连接你的安卓设备。
测试浏览器时： 安卓 4.0+ 和 Chrome 安卓版。
测试 APP 时：安卓 4.0+ 和经过配置启用调试的 WebView。

注意：远程调试要求你桌面版的 Chrome 版本比你安卓设备上的 Chrome 更新。所以最好的选择是使用 Chrome Canary （Mac/Windows）或者 Chrome Dev channel 发行版（linux）。

如果你在使用远程调试的时候遇到问题，可以参考疑问答疑部分。

设置你的安卓设备

想要使用远程调试，先按照下面说明来设置你的安卓设备。

1，启用 USB 调试

在你的安卓设备上，打开 设置 > 开发者选项。

注意： 在 Android 4.2 及更新版，开发者选项默认隐藏。你需要敲击 设置 > 关于手机 里面的 Build number 七次，才可以启用开发者选项。

在开发者选项里面，勾选 USB 调试复选框。

会出现一个弹窗询问你是否允许 USB 调试，选择 OK。

2，连接你的设备

使用 USB 连接线把你的安卓设备连接到你的电脑上。

注意：如果你在 Windows 系统下开发，需要安装对应你设备的 USB 驱动程序。详情请看 Android Developer 网站的 OEM USB Drivers。

在 Chrome 里面寻找你的设备

在安卓设备上设置好启用远程调试之后，在你的 Chrome 里面寻找设备。

打开你的桌面版 Chrome，在网址栏输入 chrome://inspect。确认 Discover USB devices 已经被选中：

提示：你也可以通过 Chrome 菜单 > 更多工具 > 查看设备 来打开 chrome://inspect。

在你的设备上会弹出一个对话框询问是否允许 USB 调试，点击 OK。

提示：勾选对此电脑总是允许下次就不会提示了。

这时候在你设备的消息栏就会出现 USB 调试已经连接信息。

注意：在远程调试期间，Chrome 会阻止你设备进入睡眠。这个功能对于调试非常有帮助，但是也会有隐私泄露风险。所以确保你一直盯着你的设备！

在你电脑上，chrome://inspect 会显示每一个连接上的设备，以及它们打开了的浏览器标签和启用调试的 WebViews。

如果你 chrome://inspect 页面寻找你设备的时候遇到了问题，可以参考疑问答疑部分。

调试远程浏览器标签下的内容

在 chrome://inspect 中，你可以启用 DevTools 来调试你远程浏览器标签下的内容。

点击你想调试标签下面的 inspect 按钮来开始调试。

你电脑上会弹出一个新的 Chrome DevTools 窗口。在这个窗口，你可以实时的调试你设备上的页面。

举个例子，使用 DevTools 可以在你设备上实现如下功能：

在 Elements 面板上把鼠标移动到一个对象上时，DevTools 会在你设备上高亮这个对象。
你也可以点击 DevTools 上 Inspect Element 图标，然后敲击你设备上屏幕上的某一个地方。DevTools 会在 Elements 面板上高亮你敲击的对象。

注意：远程调试的时候使用的 DevTools 版本取决于你设备上的 Chrome 版本。所以，远程调试的 DevTools 可能看起来跟你平时使用的版本不同。

调试技巧

下面试一下调试过程中的小技巧：

在 DevTools 窗口中使用 F5 （在 Mac 上是 Cmd+r）来刷新远程页面。
让设备在蜂窝网络上，使用 Network 面板来查看在实际移动网络的网络情况。
使用 Timeline 面板来查看页面渲染和 CPU 使用情况。由于硬件差异，移动端设备通常你比电脑运行慢很多。
如果你运行了一个本地的 web 服务器，使用端口转接或者虚拟 host 映射让你的设备可以访问本地网站。

调试 WebViews

在 Android 4.4（KitKat）或者更新版，你可以使用 DevTools 来调试原生安卓应用中的 WebVies 内容。

配置 WebViews 来启用调试

必须要在你应用中设置才可以启用 WebView 的调试。你可以调用一个 WebView 类的静态方法 setWebContentsDebuggingEnabled。

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
  }

这样就在应用里面所有的 WebViews 中启用调试。

提示：WebView 调试并不会被应用 manifest 中 debuggable 标志符状态的影响。如果你想仅仅在 debuggable 为 true 时启用 WebView 调试，需要判断一下。

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
  }

在 DevTools 打开一个 WebView

chrome://inspect 页面中会显示你设备中启用调试的 WebViews。

点击下面的 inspect 来启用调试。就可以像调试远程浏览器标签下内容一样调试了。

上图中 WebView 旁边的灰色图表示相对于它相对于设备屏幕的尺寸和位置。如果你的 WebView 设置了 title，title 的内容也会列出来。

实时截屏

老是在两个屏幕中来回看并不是很方便。这个功能截取你设备的屏幕显示在电脑上 DevTools 的左边。你也可以操作这个截屏来与你的设备进行交互。

从 KitKat 4.4.3 开始，截屏功能在浏览器标签和安卓 WebViews 下都可以使用。

打开截屏功能

在远程调试 DevTools 窗口的右上角，点击 Screencast 图标即可开启截屏功能。

截屏面板就会在左边打开并且返回设备屏幕的实时状态。

截屏仅仅显示主体内容。工具栏、键盘或者其他设备上的界面会变成透明状。

注意：因为截屏会持续的截取屏幕帧，会带来一些性能方面的影响。如果你的测试对帧速率比较敏感，请禁用截屏功能。

使用截屏功能与你的设备交互

当你操作截屏视图的时候，单击会被改变成敲击，在设备上触发对应的 touch 时间。敲击键盘也会反映到你的设备上，这样你就可以在电脑上往手机上输入了内容了。

其他 DevTools 功能也可以在截屏视图上有所反应。例如，单击 Inspect Element 图标，然后在截屏视图上也可以选择一个元素。

提示：可以通过按住 Shift 同时拖动来模拟一个捏的操作。使用你的触摸板或者鼠标滚珠可以实现滚动。

端口转移

你的手机不一定每次都可以访问你的开发环境服务器。它可能在不同网络下使用。更多的，你还有可能在一个公共的公司网络开发。

Chrome 的端口转移功能可以非常简单的让你手机测试你开发的网站。工作原理就是在你移动端设备上创建一个监听的 TCP 端口然后映射到你开发机器上的某个 TCP 端口。两个端口的数据连接通过 USB 连接线，所以不会被你的网络情况影响。

按照如下操作启用端口转接：

在你开发机器上打开 chrome://inspect。
点击 Port Forwarding。会出现配置菜单
在 Device port 表单，输入你想要你安卓设备监听的端口号。（默认端口 8080）
在 Host 表单，填写你 Web 应用的 IP 地址（或者主机名）和端口号。这个地址可以是任何你开发机器可访问的本地地址。当然，端口号必须在 1024 - 65535 之间。
点击 Enable port forwarding。
点击 Done。

当端口转移正常工作的时候，chrome://inspect 页面中端口状态显示器会显示成绿色。

现在你可以打开一个新的标签，然后在你的设备上查看你本地服务器上的内容。

虚拟 host 映射

当你在 localhost 本地开发的时候，端口转接正常工作。但是当你使用自定义本地域名的时候，可能就会遇到一些问题。

举个例子，你需要的第三方 JavaScript SDK 只能工作在某个白名单域名列表里面，这样你需要添加绑定一条类似 127.0.0.1 production.com 这样的域名到你的 hosts 文件里面。或者是你在你的 Web 服务器（MAMP）使用虚拟 hosts 功能设置了一个自定义域名。

如果你需要让你的手机能访问自定义域名的内容，你可以使用域名转接和代理服务器实现。这个代理服务器将你设备的请求映射到你正确的 Host 主机上面。

设置端口转接到一个代理服务

虚拟 host 映射需要你在 host 机器上运行一个代理服务器。所有你安卓设备的请求都会被转移到这个代理上。

按照如下步骤来设置端口转移到一个代理服务器上：

在 host 机器上，安装代理软件，例如 Charles 或者 Squid。
启用代理服务器并且注意启用的端口是否被占用。 注意：这个代理服务器和你本地开发服务器必须运行在不同的端口上。
打开 chrome://inspect 页面。
点击 Port forwarding。配置端口转移设置。
在 Device port 表单，输入你想要你安卓设备监听的端口号。要使用一个安卓允许的端口，比如 9000。
在 Host 表单，输入 localhost:xxxx，xxxx 就是你代理服务器运行的端口号。
勾选 Enable port forwarding。
点击 Done。

Host 机器上的代理服务器会代替你的安卓设备发起请求。

在你设备上配置代理选项

你的安卓设备需要连接你 host 机器上的代理服务器。

按照如下步骤在你设备上设置代理：

找到 设置 > Wi-Fi。
长按你现在连接的网络。注意：代理设置会对每个网络都启用。
敲击 Modify network。
勾选 Advanced options。打开代理设置选项。
敲击 Proxy 选项然后选择 Manual。
在 Proxy hostname 表单，输入 localhost。
在 Porxy port 表单，输入 9000.
敲击 Save。

设置完之后，你的设所有的请求都会被转移到 host 机器的代理服务器上。这个代理服务器代表了你的设备，所以对你自定义域名的请求就被正确的返回了。

现在你就可以像在本地打开一样，在安卓的 chrome 上面打开一个本地的域名。

提示：想要恢复设备正常的浏览，记住在与 host 断开连接后在你设备上恢复代理设置。

疑问解答

在 chrome://inspect 页面无法看到我的设备。

如果你基于 Windows 开发，检查你是否安装了你设备对应的 USB 驱动。详情见 Android Developers 网站上的 OEM USB Drivers。
检查设备是否直接连接到你的电脑，避免通过集线器连接。
检查 USB debugging 是否在你的设备上启用了。别忘了在你设备上弹出的是否允许 USB 调试对话框上点击确认。
在你桌面版浏览器上打开 chrome://inspect 页面并检查是否勾选 Discover USB devices。
远程调试需要你桌面版的 Chrome 版本要比你安卓设备上的 Chrome 更新。试试 Chrome Canary（Mac/Windows）或者 Chrome Dev channel 桌面发行版（Linux）。

如果你仍然无法发现你的设备，拔下来。在你设备上，找到 设置 > 开发者选项，敲击 Revoke USB debugging authorization。然后重试设置你的安卓设备和寻找 USB 设备步骤。

在 chrome://inspect 页面无法看到我浏览器的标签。

在你的设备上，打开 Chrome 浏览器同时打开你想要调试的网页。然后刷新 chrome://inspect 页面。

在 chrome://inspect 页面无法看到我 WebViews 内容

查看你的 app 是否启用了 WebView 调试。
在你设备上，打开你想要调试 WebView 的 app。然后刷新 chrome://inspect 页面。

在我的安卓设备上无法访问我的 Web 服务器

如果网络限制了你的移动端设备访问你开发服务器，试一下端口转接或者设置虚拟 host 映射;

最后，如果远程调试仍然不起作用，你可以通过 Android SDK 里面的 adb 程序使用老方法来调试。

补充信息

远程调试和 ADB

你再也不需要配置 ADB 或者 ADB 插件来调试远程浏览器标签下内容和 WebViews。针对安卓的远程调试现在是 Chrome DevTools 的一部分了。而且可以在所有操作系统中使用：Windows，Mac，Linux 以及 Chrome OS。

如果你远程调试遇到了问题，你可以通过 Android SDK 里面的 adb 程序再试试老方法。

注意：Chrome 和你设备的 USB 连接可能会大大unni的 adb 连接。在创建你 adb 连接之前，在 chrome://inspect 中取消掉 Discover USB devices。然后插拔一下设备。

针对 DevTools 扩展开发者的远程调试资料

想要获取更多的远程调试交互协议，可以参考 Debugger Protocol 文档和 chrome.debugger。

转自：https://github.com/yujiangshui/CN-Chrome-DevTools

例外参考：http://yujiangshui.com/multidevice-frontend-debug/

posted on 2016-01-20 20:58 杨杨0708 阅读(643) 评论(0) 收藏举报

刷新页面返回顶部