Chrome开发工具 在安卓设备上使用 Chrome 远程调试功能

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 在安卓设备上使用 Chrome 远程调试功能你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容。安卓远程调试支持：在浏览器选项卡中调试网站。在原生安卓应用中调试网页内容。将屏幕从你的安卓设备上投影到你的开发机器上。使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器。需求要开始远程调试，你需要：安装 Chrome 32 或者之后的版本。连接安卓设备用的 USB 线缆。对于通过浏览器调试：安卓 4.0 以上并且安装了 Chrome for Android。对于通过应用调试：安卓 4.4 以上并且应用包括可用于调试的 WenView 组件。提示：远程调试需要你电脑端的 Chrome 版本要高于安卓端的版本。想更好地使用此功能，请使用电脑端的 Chrome Canary （Mac/Windows） 或者 Dev channel 发行版（Linux）。如果使用远程调试的时候出现了问题，请参考 Troubleshootling。设置安卓设备请按照以下说明来设置安卓设备：1. 打开 USB 调试选项在安卓设备上，进入设置>开发者选项。 设置页面的开发者选项注意：在安卓 4.2 及以后的版本中，默认情况下开发者选项是隐藏的。要启用开发者选项，选择设置>关于手机然后点击版本号7次。在开发者选项中，选中 USB 调试复选框。在安卓上启用 USB 调试之后会有一个警告，提示你是否要开启 USB 调试模式。选择 OK。2. 连接你的设备将你的安卓设备和电脑用 USB 线连接起来。注意：如果你在 Windows 下进行开发，那么你需要为你的安卓设备安装驱动。具体可以参考安卓开发者网站上的 OEM USB Drivers在 Chrome 中找到设备在安卓设备上设置好远程调试后，在 Chrome 中找到你的设备。在电脑端的 Chrome 里，在地址栏输入 chrome://inspect。进入后确认 Discover USB devices 已经勾选了：**提示**：你也可以从 Chrome menu > More tools > Inspect Devices 来进入 chrome://inspect在你的设备上，会跳出一个警告，告诉你是否要允许在电脑端进行 USB 调试。选择 OK。提示：如果希望以后不再弹出系那个管提示，勾选 Always allow from this computer注意：在远程调试时， Chrome 会阻止你的设备进入休眠状态。该特性对于调试相当有用，但在安全性上有所欠缺。所以在调试的时候要注意看好你的手机！在电脑端，打开选项卡并启用 WebViews 调试后，chrome://inspect 页面会显示全部已连接的设备。从 chrome://inspect 也卖弄查看已连接的设备如果从 chrome://inspect 页面查找设备时遇到了问题，请参考 Troubleshooting 章节。调试远程浏览器在页面 chrome://inspect 上，你可以加载 DevTools 并且调试你的远程浏览器。要开始调试，请点击你希望调试的浏览器选项卡下面的 inspect。接着你的电脑会加载新的 DevTools。在新的 DevTools 上，你可以在你的安卓设备上和选中的浏览器实时交互。通过电脑上的 DevTools 来调试安卓手机上的网页比如，你可以在你的设备上使用 DevTools 来监审查网页元素：当你的鼠标悬浮在 Elements 面板中的某个元素上时，DevTools 会在你的设备上高亮显示相关元素。你也可以点击 审查元素 然后点击设备的屏幕，DevTools 就会在 Elements 面板中让选中的元素高亮显示。注意：你设备的 Chrome 版本将会决定远程调试中 DevTools 的版本。由于这个原因，你在远程调试时使用的 DevTools 可能和你平常使用的不大一样。调试提示下面是使用远程调试功能的一些提示：按 F5（或者在Mac上 Cmd + r）来重新加载远程页面。让设备的网络处于打开状态。使用 Network 面板来查看实际移动设备的网络流状态。使用 Timeline 面板来分析提交数据和 CPU 使用状态。在移动设备上运行的程序通常会比在开发机器上运行的要慢一些。如果你是在本地的 web 服务器上运行的，使用端口转发或者虚拟主机映射 技术来让设备访问你的站点。调试 WebViews在安卓 4.4 及后续版本中，你可以使用 DevTools 来调试原生安卓应用中的 WebView 的内容。将 WebViews 配置为可调试状态你的应用程序必须允许调试 WebView。要开启 WebView 调试，在 WebView 类里面调用静态函数 setWebContentsDebuggingEnabled。if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true);}该设置对该应用中所有的 WebView 都会生效。提示： 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 中打开 WebViewchrome://inspect 页面会显示设备中所有可调试的 WebView.要开始调试，点击你想调试的 WebView 下面的 inspect。接下来就像使用远程浏览器选项卡一样使用 DevTools。使用 Chrome DevTools 来调试远程安卓 Webview在 WebView 中列出的灰色图片表示其大小以及相对设备屏幕的大小。如果你的 WebView 有设置名称，那么其名称也会列出来。实时截屏要在两个屏幕间不断转移注意力是相当不方便的。Screencast 将你设备的屏幕显示在开发机上的 DevTools 右侧。你也可以在 screencast 中与你的设备进行交互。在 KitKat 4.4.3，screencast 既可以给浏览器选项卡使用也可以给安卓 WebView 使用。开启截屏会话要开启 screecast，点击远程调试窗口右侧上方的 Screencast 图标。Screecast 图标Screencast 面板在左侧打开并且显示设备屏幕的实时状况。在你的电脑上与你的安卓设备实时进行交互截屏只会显示网页内容。该截屏的透明部分涵盖了多功能框、设备键盘以及其他设备接口。注意：由于截屏会连续捕获帧，会造成不小的性能开销。如果你的测试是对帧速率敏感的，最好禁用截屏。使用截屏来与设备交互当你使用截屏来互动的时候，点击会被转换为触屏，会在设备上触发适当的触控事件。电脑端的按键会发送到设备，这样就可以避免使用大拇指来打字。其他的 DevTools 工作也可以