Chrome调试webview页面

前言

有时候在测试APP的时候，发现APP其实是通过webview内嵌了一个h5，这种情况下如果遇到数据加密，那么最好的方式就是调试分析JS，因此如何调试分析webview中页面的JS，就是本次要解决的问题。

过程

检查APP是否开启webview调试模式，即是否有相关代码如下：

也可以通过后续的步骤看chrome能不能捕捉到，或者直接一股脑加载frida js

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

如果没有开启webview调试，可通过frida脚本去hook尝试，相关脚本搜索语法：

site:codeshare.frida.re intext:webview

然后在Chrome中输入Chrome://inspect，可以来到开发工具页面，可以看到外接Android设备。

再正常打开webview，就可以成功监听到对应的webview页面

点击inspect，就达到了和电脑中浏览器F12一样的效果，因此也就可以继续下断点调试分析了。

总结

• 确保 WebView 调试选项已启用：

  • 在 WebView 113.0.5656.0 及更高版本中，如果应用在清单文件中声明为 android:debuggable="true"，则调试选项会自动启用。否则，默认值为 false。

• 连接设备并打开 Chrome 开发者工具：

  • 通过 USB 连接 Android 设备到开发者计算机上。
  • 在 Chrome 地址栏中输入 chrome://inspect 并按下 Enter 键，打开 Chrome 开发者工具。

• 在 Chrome 开发者工具中检测 WebView：

  • 在 Chrome 开发者工具页面上，确保 "Discover USB devices" 复选框已选中。
  • 您应该在 "Remote Target" 部分看到您连接的 Android 设备以及其上运行的 WebView。

• 连接到 WebView：

  • 在 "Remote Target" 部分，找到您要调试的 WebView，并单击 "Inspect" 按钮。
  • 这将打开一个新的开发者工具窗口，用于调试 WebView。

• 使用 Chrome 开发者工具调试 WebView：

  • 在新的开发者工具窗口中，您可以像调试常规网页一样操作和分析 WebView。
  • 使用 "Elements" 面板查看和编辑 WebView 的 DOM 结构。
  • 使用 "Console" 面板查看 WebView 的控制台输出和执行 JavaScript 代码。
  • 使用 "Network" 面板监视 WebView 的网络请求和响应。
  • 使用其他面板和工具，如 "Sources" 和 "Performance"，以进行更详细的调试和性能分析。