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。

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


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)

你可能感兴趣的:(Android端WebView调试:Chrome远程调试)