webview 中文文档 下载 App

远程调试 WebView:用桌面 Chrome DevTools 调试 App 内嵌网页

开启设备端开关

Android 4.4+ 内置支持 WebView 远程调试,默认关闭,需要 App 自己在代码里打开:

// 放在 Application.onCreate 或 Activity.onCreate 里
WebView.setWebContentsDebuggingEnabled(true);

也可以放在 BuildConfig.DEBUG 判断里只在开发包开启:

if (BuildConfig.DEBUG) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Android 16 开始,开发者选项 → WebView 开发者工具里有直接的开关,不需要改代码。

连接设备

  1. 手机开 开发者选项 → USB 调试
  2. USB 连上电脑
  3. 手机上弹授权框,点"允许"
  4. 电脑 Chrome 地址栏输入 chrome://inspect
  5. 等一下,应该能看到你的设备

能看到什么

在 chrome://inspect 里点开设备,会列出所有当前可调试的 WebView 实例:

点击 "inspect" 就会弹出 Chrome DevTools 面板,和你调试网页完全一样的界面——Elements、Console、Sources、Network、Performance……

实用技巧

实时控制台

Console 里可以直接执行 JS,实时操作 WebView 里的 DOM:

document.title = "我改了标题";
document.body.style.backgroundColor = "red";

查看 Cookie / LocalStorage

Application 标签页 → Storage → Local Storage → 选中 WebView 的 origin,就能看到它的完整持久化数据。

网络请求

Network 标签页可以看 WebView 里发出的所有 HTTP 请求——包括 App 内嵌网页加载的第三方资源、JS 桥接的 fetch、甚至广告 SDK 的请求。

版本信息

最顶部会显示当前 WebView 用的 Chromium 版本、V8 版本、User Agent——用来排查"是不是 WebView 版本问题"非常方便。

WebView DevTools App

Google 还提供了一个独立的 WebView DevTools App,装在手机上可以不用连电脑直接看到:

→ 下一页:权限请求处理(相机 / 麦克风 / 定位)