webView系列（十一）----webview网页调试之setWebContentsDebuggingEnabled使用

一、前言

坐混合开发，最蛋疼的就是处理webview的兼容性问题，还有就是js的调用问题，网页是可以正常调试，但是问题是出现在Android机上，需要做兼容适配，但是h5开发的同事不知道Android如何调试，这样子发现问题、解决问题就花了大量的时间，今天，就介绍Android手机使用谷歌浏览器同步Android的webview页面进行调试。

二、Android使用方法

在需要调试的webview中设置

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

作用：

• 允许调试加载到此应用程序的任何WebView中的Web内容（HTML / CSS / JavaScript）。
• 可以启用此标志，以便于调试在WebViews中运行的Web布局和JavaScript代码。

效果：

• 调试站点的页面
• 调试安卓原生App中的WebView
• 实时将安卓设备的屏幕图像同步显示到开发机器。
• 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。

三、调试要求

1. 开发环境安卓桌面版Chrome
2. 一条USB数据线，连接电脑与移动设备，安装相应机型的USB驱动。（Android开发的都知道，就不多说）
3. 如果是调试网页，移动设备需要安装Chrome forAndroid ，且安卓系统须为Android 4.0+
4. 对于APP WebView的调试，需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置。（配置就是第二点Android使用方法）

四、开启步骤

一、首先在移动设备上开启USB调试模式

1. 打开手机开发者模式（开发者模式怎么打开自行百度）
2. 在开发者模式中打开usb调试

二、用USB数据线连接设备

1. 在连接是弹窗提示，允许USB调试吗？在这里点允许

三、Chrome设置

1. 在电脑上打开Chrome（谷歌）浏览器
2. 浏览器地址栏输入chrome://inspect 或者about:inspect（效果图如下）
3. 打开后DevTools后，确保打钩选中Discover USB devices

 

 四、验证是否成功打开（效果如上图所示）

• 如果USB连接成功，这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。
• 找到需要调试的目标页面，点击inspect即可打开DevTools。

五、点击inspect效果图

 

• 上图就是需要调试的webview的页面。
• 在这里，就想是浏览器的开发者模式一样了，唯一的区别就是可以跟手机一起联动，点手机里面的网页按钮，在浏览器上的页面一样变动，点浏览器上的按钮，手机页面也跟着变动。
• 在这个页面，我们可以观察到加载的速度，加载资源耗时时间，网页加载情况，还有js等调用情况。还可以进行断点调试，如果断点调试js不懂的话，可以让h5开发人员协助一下就能达到调试目的，大大减少了问题的排查时间。 

 

到此，webview调试就讲解完了，如果有什么错的地方欢迎留言指正。最后附上本人的谷歌版本图

说明：说明：由于Chrome版本不同，DevTools也可能有些差别。在我的机器版本下没有问题，但是在我同事的最新谷歌版本（版本 75.0.3770.100（正式版本） （32 位））上调试竟然出现404错误，知道什么原因的欢迎留言。