移动端前端开发调试

使用 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 链接线，因此不会被你的网络状况影响。

按照以下操做启用端口转接：

1. 在你开发机器上打开 chrome://inspect。

2. 点击 Port Forwarding。会出现配置菜单

3. 在 Device port 表单，输入你想要你安卓设备监听的端口号。（默认端口 8080）

4. 在 Host 表单，填写你 Web 应用的 IP 地址（或者主机名）和端口号。这个地址能够是任何你开发机器可访问的本地地址。固然，端口号必须在 1024 - 65535 之间。
5. 点击 Enable port forwarding。
6. 点击 Done。

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

如今你能够打开一个新的标签，而后在你的设备上查看你本地服务器上的内容。

虚拟 host 映射

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

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

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

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

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

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

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

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

在你设备上配置代理选项

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

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

1. 找到 设置 > Wi-Fi。
2. 长按你如今链接的网络。注意：代理设置会对每一个网络都启用。
3. 敲击 Modify network。
4. 勾选 Advanced options。打开代理设置选项。
5. 敲击 Proxy 选项而后选择 Manual。
6. 在 Proxy hostname 表单，输入 localhost。
7. 在 Porxy port 表单，输入 9000.
8. 敲击 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/