使用Chrome开发者工具远程调试原生Android上的H5页面

Android4.4(KitKat)开始，使用Chrome开发者工具能够帮助咱们在原生的Android应用中远程调试WebView网页内容。具体步骤以下：

（1）设置Webview调试模式

能够在Activity的init进行以下设置，WebView类包含一个公共静态方法，可应用于项目中的全部WebView，同时不受Manifest文件中的debuggable属性影响。

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

（2）调试WebView

USB链接设备的前提下，PC打开Chrome浏览器，输入：

chrome://inspect/#devices

DevTools页面的Devices会显示当前链接的远程设备名称和序列号，以及当前原生App打开的WebView的网页地址，如图：

（3）修改H5页面内容
点击inspect选项进入开发者工具页面，能够修改html页面的html、js代码。

重点：
html代码：Elements直接修改，立刻生效；
js：须要console修改js并提交才生效。