使用Chrome开发者工具远程调试Android中的WebView

Android 4.4 (KitKat) 开始，使用 Chrome 开发者工具可以帮助我们在原生 Android 应用中远程调试 WebView 网页内容

1. 打开调试

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

2.使用USB连接手机,打开开发者模式,在Chrome里面输入

chrome://inspect

3. 可以看到所有设备和当前手机上打开的网页

   
   
   

   image.png

我们点击红色箭头对应的那个inspect,即可进入当前手机打开的页面,同时同步到Chrome浏览器里面
可以看到左边的就是当前我们手机屏幕上显示的H5页面,而且可以用鼠标点击操作的

image.png

4. 点击Network,按住F5刷新页面,就会发现在Sources里面会出现所有的H5源码,红色箭头可以进行debug步进操作等等,Console可以显示控制台,H5页面打印的东西可以在这里看到

   
   
   

   image.png