移动前端调试（Android + Chrome 实现远程调试）

应用背景：

在智能手机还未普及时，移动设备的调试处处是alert的，这估计是最常用的办法了。以前很多时候为了预览页面在移动设备上的效果，需要先将页面上传到测试服务器，再将url输入到设备浏览器，每次换设备都要重复这些操作，页面多的话这些繁琐的事情就特别让人厌烦了。于是，我们就想找到一个可以像pc端调试（f12）的调试工具——chrome

 

功能：

我们先看下最终想要达到的效果

上图的左边是pc端的chrome浏览器，右边是家教机上的webview 然后可以看到当鼠标移动到某个div上时 家教机上的这个区域高亮显示 跟pc上调试某段代码效果一样 你可以修改代码 并直接在手机上反馈修改结果

 

准备工作：

1.pc端安装最新的chrome和adb

2.手机端安装最新的chrome (Android机)

3.USB连接线

说明：

1. 如果是调试网页，移动设备需要安装Chrome forAndroid ，且安卓系统须为Android 4.0+
2. 桌面版Chrome 32+已经支持免安装ADB即可实现远程调试移动设备页面/WebView
3. 对于APP WebView的调试，需要系统为Android 4.4+ 并且原生应用内的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); }
}

 

步骤：

1.使用usb将移动段与PC相连接；

2.移动段中选中"开发人员选项"->"USB调试"；

3.打开pc侧chrome, 在地址栏中输入chrome://inspect 选中discover usb devices。可以看到我们的移动设备，如下图所示

4. 在移动端中访问页面（webView）同步的，我们会在pc侧的chrome上看到到移动端访问的页面，如下图所示：

5.点击inspect 如下图 就看到了文章开始一样的效果 此时就是可以审查手机页面上的元素了。

如果你点击inspect打开的DevTools窗口一片空白，且刷新无效时，那极有可能是由于被墙的缘故，这里需要加载一个插件，你可以尝试appspot.com是否可以ping的通，如果无法ping通，那你现在就先吧。

 

补充说明一下，如果接上USB数据线后，没有显示任何连接的设备，请按照以下步骤排查：

● 检查您的设备连接到USB，检查USB数据线。

● 确保您的设备发出ADB设备命令列为可用。如果没有，检查是否有您的设备上是否启用USB调试。

● 若是Windows系统，检查你的USB驱动是否安装正确。参考http://developer.android.com/tools/extras/oem-usb.html

● 桌面Chrome浏览器打开 chrome://inspect检查Discover USB devices是否选中

● 如果依然无法显示，尝试重新拔插USB数据线。

 

最后，chrome远程调试还有很多其他的很多功能，如果想学习的话请点击下面的链接：

http://www.css88.com/doc/chrome-devtools/remote-debugging/webviews/