使用 WebView 开发者工具应用进行调试

WebView 开发者工具应用是一款设备端实用程序，用于管理和调试系统 WebView 组件本身。它与 Chrome DevTools 是分开的，后者在您的开发机器上运行，可让您远程调试 WebView 实例中运行的实时 Web 内容（HTML、CSS 和 JavaScript）。

WebView DevTools 是一款配套应用，会与 WebView 系统组件一起自动安装在您的设备上。该应用分为四个区域：

  • 首页：查看版本信息，并将默认 WebView 切换为预发布渠道版本。
  • 崩溃：列出并上传 WebView 崩溃报告。
  • 标志：设置开发者标志以更改 WebView 的行为。
  • 网络日志：列出并分享 WebView 低级别网络日志。

运行 WebView 开发者工具

在搭载 Android 16 或更高版本且已启用开发者模式的设备上，您可以依次前往设置 > 系统 > 开发者选项 > WebView DevTools，启动 WebView DevTools。

在所有最新的 Android 版本中，您都可以使用 adb 命令启动 WebView DevTools：

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

或者，如果您安装了 WebView 的预发布渠道（例如 Beta、Dev 或 Canary），则可以使用 WebView 开发者工具启动器图标。

WebView DevTools 启动器图标。
图 1. 设备上安装的应用的 WebView 开发者工具图标。

您首次运行 WebView 开发者工具时，它会请求通知权限，以便显示列出您启用的开发者标志的持久性通知。

切换到预发布渠道

最新的 WebView 功能和 bug 修复会先在预发布渠道中提供。您可以使用 WebView 开发者工具切换设备的 WebView 提供程序，从而针对这些更改测试应用。针对预发布渠道进行测试有助于确保您的应用在即将推出的 WebView 版本面向用户发布之前，就已与这些版本兼容。

  1. 安装 WebView 的 Beta 版、开发版或 Canary 版，具体取决于您希望在稳定性和获取最新变更之间做出何种权衡。
  2. 打开 WebView 开发者工具应用，然后点按 Change Provider。
  3. 如果您没有看到该选项，请点按右上角的三点状图标，然后选择 Change WebView Provider。

如需了解详情，请参阅试用 WebView Beta 版、开发版或 Canary 版。

WebView 渠道

WebView 渠道基于 Chrome 发布渠道。每个渠道代表不同的代码稳定性和新鲜度。下面简要介绍了每种 WebView 渠道的适用情形：

  • Canary：每天更新。此渠道包含最新的变更，包括新功能和 bug 修复，这些变更一旦合并到 Chromium 代码库中，就会立即提供。如果您想测试 Web 应用在具有最近合并的变更的 WebView 中的运行情况，请使用此渠道，但请注意，此渠道可能不稳定或包含 bug。

  • 开发版：每周更新一到两次。此渠道比 Canary 更稳定，但仍包含前沿的变更。它最适合想要测试新功能但又希望降低无关 bug 风险的开发者。

  • Beta 版：大约每周更新一次，每 4 周进行一次重大更新。 此渠道可让您在 WebView 稳定版发布前约 4-6 周抢先体验下一个稳定版中的功能。使用此功能可针对即将发布的 WebView 版本测试您的 Web 应用，以验证兼容性。

  • 稳定版：每 4 周会进行一次重大更新，每 2-3 周会进行一次小幅更新，以修复紧急 bug。这是 WebView 的正式版渠道，面向所有用户推出。这是最稳定的渠道，已在其他渠道中经过测试。如果您想以大多数用户目前的方式在 WebView 中体验您的 Web 应用，或者想重现他们报告的 bug，请使用此标志。

崩溃界面

如果您在开发应用时遇到 WebView 崩溃问题，可以使用 WebView 开发者工具列出、上传这些崩溃问题并针对它们提交 bug 报告。

  1. 应用崩溃后，请重启应用，以确保生成崩溃报告。
  2. 打开 WebView 开发者工具应用，然后点按崩溃。

如需了解详情，请参阅崩溃界面文档。

标记界面

借助 WebView DevTools 应用，您可以设置多个实用标志来更改设备上所有 WebView 的行为。大多数标志仅用于 WebView 本身的开发，但少数标志对 Android 应用开发者很有用。

  • highlight-all-webviews：通过在 WebView 上添加黄色底纹来识别它们。
  • net-log：启用 WebView 网络活动的低级别日志记录。
  • webview-log-js-console-messages：使 JavaScript 控制台日志显示在 Logcat 中。
显示“标志”界面的 WebView 开发者工具应用。
图 2. WebView DevTools 应用中的“标志”界面。

如需了解详情，请参阅标志界面文档。

网络日志

如果您无法使用 Chrome 开发者工具解决 WebView 中的服务器连接问题，请使用 WebView 开发者工具捕获低级网络日志。

  1. 在应用代码中启用 WebView 调试功能。
  2. 在 WebView 开发者工具中，打开 Flags，找到 net-log，然后将其切换为开启状态。 重新启动应用，以使该标志生效。
  3. 执行会触发您要调试的网络行为的操作。重现问题后，关闭应用。
  4. 打开 WebView DevTools 的“网络日志”部分，找到并分享网络日志文件。
  5. 您可以将 JSON 日志文件加载到 Netlog 查看器（一种用于直观呈现网络日志的在线工具）中，以检查低级网络事件、套接字信息和时间安排详细信息。

如需了解详情，请参阅 WebView 中的网络调试。