手机上浏览你的 Web 网页的感觉跟你在桌面版的体验可能完全不同。Chrome DevTools 的远程调试功能可以让你用电脑连接你的安卓设备进行实时调试。
安卓远程调试支持:
想要开始远程调试,你需要:
注意:远程调试要求你桌面版的 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://inspect。确认 Discover USB devices 已经被选中:
提示:你也可以通过 Chrome 菜单 > 更多工具 > 查看设备 来打开 chrome://inspect。
在你的设备上会弹出一个对话框询问是否允许 USB 调试,点击 OK。
提示:勾选对此电脑总是允许下次就不会提示了。
这时候在你设备的消息栏就会出现 USB 调试已经连接信息。
注意:在远程调试期间,Chrome 会阻止你设备进入睡眠。这个功能对于调试非常有帮助,但是也会有隐私泄露风险。所以确保你一直盯着你的设备!
在你电脑上,chrome://inspect 会显示每一个连接上的设备,以及它们打开了的浏览器标签和启用调试的 WebViews。
如果你 chrome://inspect 页面寻找你设备的时候遇到了问题,可以参考疑问答疑部分。
在 chrome://inspect 中,你可以启用 DevTools 来调试你远程浏览器标签下的内容。
点击你想调试标签下面的 inspect 按钮来开始调试。
你电脑上会弹出一个新的 Chrome DevTools 窗口。在这个窗口,你可以实时的调试你设备上的页面。
举个例子,使用 DevTools 可以在你设备上实现如下功能:
注意:远程调试的时候使用的 DevTools 版本取决于你设备上的 Chrome 版本。所以,远程调试的 DevTools 可能看起来跟你平时使用的版本不同。
下面试一下调试过程中的小技巧:
F5
(在 Mac 上是 Cmd+r
)来刷新远程页面。在 Android 4.4(KitKat)或者更新版,你可以使用 DevTools 来调试原生安卓应用中的 WebVies 内容。
必须要在你应用中设置才可以启用 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); } }
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 连接线,所以不会被你的网络情况影响。
按照如下操作启用端口转接:
点击 Port Forwarding。会出现配置菜单
在 Device port 表单,输入你想要你安卓设备监听的端口号。(默认端口 8080)
当端口转移正常工作的时候,chrome://inspect 页面中端口状态显示器会显示成绿色。
现在你可以打开一个新的标签,然后在你的设备上查看你本地服务器上的内容。
当你在 localhost 本地开发的时候,端口转接正常工作。但是当你使用自定义本地域名的时候,可能就会遇到一些问题。
举个例子,你需要的第三方 JavaScript SDK 只能工作在某个白名单域名列表里面,这样你需要添加绑定一条类似 127.0.0.1 production.com
这样的域名到你的 hosts 文件 里面。或者是你在你的 Web 服务器(MAMP)使用虚拟 hosts 功能设置了一个自定义域名。
如果你需要让你的手机能访问自定义域名的内容,你可以使用域名转接和代理服务器实现。这个代理服务器将你设备的请求映射到你正确的 Host 主机上面。
虚拟 host 映射需要你在 host 机器上运行一个代理服务器。所有你安卓设备的请求都会被转移到这个代理上。
按照如下步骤来设置端口转移到一个代理服务器上:
Host 机器上的代理服务器会代替你的安卓设备发起请求。
你的安卓设备需要连接你 host 机器上的代理服务器。
按照如下步骤在你设备上设置代理:
设置完之后,你的设所有的请求都会被转移到 host 机器的代理服务器上。这个代理服务器代表了你的设备,所以对你自定义域名的请求就被正确的返回了。
现在你就可以像在本地打开一样,在安卓的 chrome 上面打开一个本地的域名。
提示:想要恢复设备正常的浏览,记住在与 host 断开连接后在你设备上恢复代理设置。
在 chrome://inspect 页面无法看到我的设备。
如果你仍然无法发现你的设备,拔下来。在你设备上,找到 设置 > 开发者选项,敲击 Revoke USB debugging authorization。然后重试设置你的安卓设备和寻找 USB 设备步骤。
在 chrome://inspect 页面无法看到我浏览器的标签。
在 chrome://inspect 页面无法看到我 WebViews 内容
在我的安卓设备上无法访问我的 Web 服务器
最后,如果远程调试仍然不起作用,你可以通过 Android SDK 里面的 adb 程序使用老方法来调试。
你再也不需要配置 ADB 或者 ADB 插件来调试远程浏览器标签下内容和 WebViews。针对安卓的远程调试现在是 Chrome DevTools 的一部分了。而且可以在所有操作系统中使用:Windows,Mac,Linux 以及 Chrome OS。
如果你远程调试遇到了问题,你可以通过 Android SDK 里面的 adb 程序再试试老方法。
注意:Chrome 和你设备的 USB 连接可能会大大unni的 adb 连接。在创建你 adb 连接之前,在 chrome://inspect 中取消掉 Discover USB devices。然后插拔一下设备。
想要获取更多的远程调试交互协议,可以参考 Debugger Protocol 文档和 chrome.debugger。
转自:https://github.com/yujiangshui/CN-Chrome-DevTools
例外参考:http://yujiangshui.com/multidevice-frontend-debug/