WebView 内容远程调试

在 Hybrid App 开发中 WebView 组件非常重要。在开发 H5 应用的时候,我们会需要在真机App 的 WebView 里进行调试。

在移动操作系统早期,相关特性支持还不完善的时候,weinre 这类的第三方调试方案就出现了。在微信推 H5 开发的时候,提供的微信 H5 开发工具时,就是使用 weinre 这个方案。

weinre 是个跨平台的通用调试方案,不过需要在 H5 的 HTML 中加入指定的调试 js。遗憾的是,weinre 无法对 js 进行断点调试。目前 weinre 从2012年开始处于停滞开发阶段。

随着手机操作系统的成熟,iOS 和 Android 都从系统层级支持了 WebView 的调试。

iOS 的 WebView 和 MKWebView

对于 iOS 的 WebView 来说,可以很容易使用 Safari 对 iOS 模拟器和 iPhone 手机的 App 调试 WebView。

  1. 首先打开 Safari 浏览器的「Perferences」, 在「Advance」标签页下,勾选「Show Develop menu in menu bar」。
  2. 然后在 iOS 模拟器或iPhone手机上运行带 WebView 的 App。
  3. Safari -> Develop -> [device name] -> [app name] -> [url - title]
  4. Safari 浏览器会打开对应的调试窗口,你就可以像本地开发一样在模拟器或者真机上调试了。

不过对于很多 iOS 项目为了提供 web 渲染效率,会选择性能更好的 MKWebView 组件。MKWebView 无法在生产环境下的 App 中做调试,只能在开发环境中调试。

所以对于 iOS 远程调试的整体方案,建议在应用加入「开发模式」的设置。打开「开发模式」,则使用 WebView 组件替代 MKWebView。

Android 的 WebView

在 Andorid 引用代码中修改 WebView 属性,即可使用 Chrome 浏览器在 Android 手机上远程调试 WebView 里的内容。

  1. 修改 WebView 的相关代码:

    import android.webkit.WebView;
    
    @Override
    public void onCreate() {
     super.onCreate();
       ...
     WebView.setWebContentsDebuggingEnabled(true); //开启调试
    }
    
  2. 编译应用安装到模拟器或者 Android 手机。
  3. Chrome -> DevTools -> Menu (3 dots) -> More tools -> Remote devices
  4. 选择你的设备,然后点击「Inspect」即可查看到 WebView 中的内容。

可参考 Google 开发者文档中的文章:Android 设备的远程调试入门

同样的,你可以在应用中加入「开发模式」的设置来开启 WebView 的调试属性。