Android使用Chrome调试webview中的H5界面

 前言：我们的项目是使用的webview加载H5的应用类型，最近框架升级后项目出现问题。通过chrome进行调试，发现每次都忘记使用步骤。今天记录一下！

下面是调试步骤：

1、电脑下载的Chrom浏览器

2、代码中为WebView开启可调式:把如下代码加到webview所在的activity的onCreate方法中

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

注意：WebView.setWebContentsDebuggingEnabled(true);此方法为WebView的静态方法，不需要使用自己的webview进行设置

3、把手机通过数据线连接电脑（设备记得开启开发者模式，并打开USB调试）

4.在Chrome浏览器输入地址：chrome://inspect

如图：

 5、运行自己的项目到H5界面展示出来

我们的项目是Android+H5，注意这里要等到H5界面展示出来。

6、在Chrome浏览器中调试H5页面

当应用显示到H5界面时浏览器的调试界面显示出能调试的界面,点击图中的inspect。

7、点击inspect后可能会出现如下白屏情况，这时需要vpn

 开启vpn后再点击inspect

 下面就可以愉快的调试了！