Android端WebView调试：Chrome远程调试

总结使用Chrome远程调试Android手机NativeApp中WebView网页的方法。

环境要求：

• 支持目前主流操作系统（Windows, Mac, Linux, and Chrome OS.)。
• 桌面版Chrome32+（chrome版本越高越好，最新版本Chrome已支持免安装adb）。
• USB数据线，连接电脑和手机，并安装好USB驱动。
• 手机系统要求4.4+，并且App的WebView要打开调试声明配置。

方法步骤：

第一步：打开手机USB调试模式

打开设置－应用程序－开发，钩上“USB调试”

第二步：USB线连接手机电脑。

手机设备上可能弹出“允许USB调试”授权弹框，请允许。

第三步：打开电脑上Chrome中设备列表界面

在Chrome菜单－更多工具－检查设备（Chromemenu>More tools>Inspect Devices）或者直接在浏览器地址栏输入chrome://inspect或者about:inspect
打开DevTools后，确保勾选上Discover USB devices。

QQ20171027-141148@2x.png

如果USB连接成功，这时候我们可以看到手机型号和设备上运行的页面和允许调试的WebView列表；找到要调试的目标页面，点击inspect即可打开DevTools。
点击reload可重新加载当前的调试页面，也可以在输入框输入网址打开一个新页面。

QQ20171027-141202@2x.png

Native代码

调试WebView需要满足安卓系统版本为Android4.4＋已上。并且需要App加入打开调试配置代码。

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);}  
  
  }  

参考：

移动端Web开发调试之Chrome远程调试(Remote Debugging)