Chrome调试webview页面

前言

过程

总结

前言

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

过程

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

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

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

webview debug

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

devtools

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

webview page

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

F12 总结

1. 确保 WebView 调试选项已启用：

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

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

通过 USB 连接 Android 设备到开发者计算机上。

在 Chrome 地址栏中输入 并按下 Enter 键，打开 Chrome 开发者工具。

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

在 Chrome 开发者工具页面上，确保 "Discover USB devices" 复选框已选中。

您应该在 "Remote Target" 部分看到您连接的 Android 设备以及其上运行的 WebView。

4. 连接到 WebView：

在 "Remote Target" 部分，找到您要调试的 WebView，并单击 "Inspect" 按钮。

这将打开一个新的开发者工具窗口，用于调试 WebView。

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

在新的开发者工具窗口中，您可以像调试常规网页一样操作和分析 WebView。

使用 "Elements" 面板查看和编辑 WebView 的 DOM 结构。

使用 "Console" 面板查看 WebView 的控制台输出和执行 JavaScript 代码。

使用 "Network" 面板监视 WebView 的网络请求和响应。

使用其他面板和工具，如 "Sources" 和 "Performance"，以进行更详细的调试和性能分析。