众所周知，如今各种各样的APP都开始内置浏览器，但这些APP的内置浏览器事实上只是浏览器的阉割版本，也就是WebView

相比功能完善的浏览器几乎都包括：

  • 地址栏
  • 标签页
  • 下载管理
  • DevTools
  • Chromium 网页渲染引擎

而WebView正如它的名字一样，事实上只是一个简单的网页浏览工具，通常只包括HTML、CSS、JavaScript和网页渲染引擎

本篇内容主要介绍如何在APP内置的WebView中使用浏览器的DevTools

环境

  • Android 16
  • Windows 11 24H2
  • QQNT (for Android) V9.3.35.39800
  • 微信 (for Android) Version 8.0.77
  • adb

关于adb

adb 即 Android Debug Bridge 是Google官方提供的一套调试通信工具，它让电脑能够向Android设备发送命令、传输数据、建立调试连接

在 WebView 调试过程中 adb 作为连接电脑端浏览器DevTools的Android手机端WebView的桥梁，在电脑端和Android端之间双向传递信息和命令

下载链接(需解压)

USB调试

国内各手机厂商的操作系统打开开发者模式的方式大体相同：连续点击OS版本号即可

然后用一根数据线连接手机和电脑，在手机设置里开发者选项中找到USB调试并打开

在adb.exe所在目录下(或写入环境变量)打开powershell，运行命令

1
adb devices

如果看到类似

的输出，说明USB调试通道连接成功

如果第一次使用时手机上弹出USB调试的危险警告无脑允许即可

Inspector

完成上述操作后，在Chrome浏览器中打开chrome://inspect/#device，勾选Discover USB devices，然后你就能看到你的设备：

在Android端Chrome打开一个网页后就会显示在这里

点击 inspect 即可进入 DevTools面板，开始你的调试

然而事实上大多数应用的内置浏览器都不会这样打开网页就自然出现在chrome://inspect上

QQ

QQNT 采用 x5内核，在任意聊天窗口下打开链接 http://debugx5.qq.com

首次打开会出现tbs调试页面，选择”安装线上内核”：

完成后重启QQ，再次进入http://debugx5.qq.com即可进入X5调试页面：

点击”调试”，输入验证码debugx5即可进入，勾选”打开TBS内核Inspector调试功能”：

然后再QQ中打开的任何网页都可以显示到chrome://inspect里了

微信

微信更加简单，在任意聊天窗口下打开http://debugxweb.qq.com/?inspector=true即可