Android抓包指南②: DevTools+WebViewDebugHook调试第三方应用的WebView

在Android开发中，抓取第三方应用的网络请求数据对于分析和优化应用性能至关重要。本篇文章将介绍如何使用DevTools和WebViewDebugHook来调试第三方应用的WebView，以便更好地理解其网络请求和性能。我们将分步骤进行，从环境准备到实际抓包，帮助读者掌握这一技术。
一、环境准备

1. 确保你的设备已经开启了开发者选项和USB调试模式。
2. 安装并打开Chrome浏览器，访问chrome://inspect页面。
3. 将设备通过USB连接到电脑，并在开发者选项中启用USB调试。
4. 在命令行中输入以下命令，安装ADB驱动程序：

   adb devices

5. 在命令行中输入以下命令，启用远程调试：

   adb reverse tcp:9222 localabstract:chrome_devtools_remote

   二、使用DevTools调试WebView
6. 在Chrome浏览器中打开开发者工具（按F12键），点击“Remote Devices”选项卡。
7. 在“Devices”列表中选择你的设备，点击“inspect”按钮打开开发者工具。
8. 在开发者工具中选择“Web Inspector”，然后点击“Inspect”按钮。
9. 在弹出的对话框中选择“Remote”选项卡，然后点击“Start inspecting”按钮。
10. 在Chrome浏览器中打开你想要调试的网页，然后点击开发者工具中的“Network”选项卡。
11. 在Network选项卡中，你可以看到所有的网络请求，包括通过WebView发出的请求。你可以查看请求的URL、方法、响应等信息。
    三、使用WebViewDebugHook调试WebView
12. 创建一个继承自WebView的自定义控件，并重写其onPageStarted、onPageFinished等方法。在这些方法中调用WebView的addJavascriptInterface方法添加一个JavaScript接口。例如：

    public class CustomWebView extends WebView {
    public CustomWebView(Context context) {
    super(context);
    }
    @Override
    protected void onPageStarted(String url, Bitmap favicon) {
    super.onPageStarted(url, favicon);
    webViewJavascriptInterface.call("onPageStarted", url);
    }
    @Override
    protected void onPageFinished(String url) {
    super.onPageFinished(url);
    webViewJavascriptInterface.call("onPageFinished", url);
    }
    }

    在上面的代码中，我们创建了一个名为CustomWebView的自定义控件，并重写了onPageStarted和onPageFinished方法。在这些方法中，我们调用了webViewJavascriptInterface的call方法，将网页加载的状态传递给JavaScript接口。
13. 在JavaScript代码中监听网页加载事件，并通过JavaScript接口回调Java代码。例如：
    javascript document.addEventListener('DOMContentLoaded', function() { var webViewDebugHook = document.querySelector('WebViewDebugHook'); if (webViewDebugHook) { webViewDebugHook.onPageStarted(document.URL); webViewDebugHook.onPageFinished(document.URL); } });在上面的代码中，我们监听了DOMContentLoaded事件，并通过querySelector方法获取了名为WebViewDebugHook的JavaScript接口对象。然后我们调用了该对象的onPageStarted和onPageFinished方法，传递了网页加载的状态给Java代码。注意：在使用该JavaScript接口时需要将其注入到你的网页中。你可以在加载网页时通过CustomWebView的loadUrl方法注入该接口：CustomWebView.loadUrl(“javascript:var webViewDebugHook = document.querySelector(‘WebViewDebugHook’); webViewDebugHook.init();”)；其中init方法是你需要实现的方法，用来初始化JavaScript接口对象。在JavaScript代码中实现init方法：init() {this.setupListeners();}；在JavaScript代码中实现setupListeners方法：setupListeners() {var self = this; window.addEventListener(‘message’, function(event) {if (event.data && event.data[‘type’] === ‘pageStarted’) {self.onPageStarted(event.data[‘url’]);} else if (event.data && event.data[‘type