19、移动端调试：使用 Chrome DevTools 远程调试 Android WebView 中的 WebRTC 应用
说实话，做 WebRTC 开发最头疼的是什么？不是信令逻辑写不对，也不是 SDP 协商搞不定——而是你明明在 PC 上跑得好好的，一上手机就翻车。音频卡顿、视频黑屏、连接断断续续……这些问题在桌面端很难复现。
我个人习惯是，从一开始就把移动端调试环境搭好。别等到上线前才手忙脚乱。今天我们就聊聊怎么用 Chrome DevTools 远程调试 Android WebView 里的 WebRTC 应用。
为什么需要远程调试？
你想想看，WebRTC 在移动端的行为和桌面端差别很大。网络切换、CPU 降频、内存限制、摄像头权限……这些因素在模拟器里根本测不出来。我曾在项目里遇到过一个问题：视频通话在小米手机上偶尔黑屏，但在 PC 上完全正常。后来一查，是 WebView 的硬件解码器兼容性问题。
远程调试能让你直接看到移动端 WebView 里的控制台日志、网络请求、DOM 结构，甚至还能打断点。说白了，就是把 Chrome 开发者工具搬到手机上用。
准备工作
嗯，这里要注意几个前提条件：
- 一台 Android 手机（系统版本 4.4+）
- 一根 USB 数据线（别用那种只能充电的线）
- PC 上安装 Chrome 浏览器（版本 32+）
- 手机开启 USB 调试模式
USB 调试怎么开？不同手机路径略有不同，但大致是：设置 → 关于手机 → 连续点击「版本号」7 次 → 返回设置 → 开发者选项 → 开启 USB 调试。
第一步：连接手机与 PC
用 USB 线连上手机。PC 上打开 Chrome，在地址栏输入：
chrome://inspect你会看到这样的界面：
如果手机没显示出来，检查一下：
- USB 线是不是只充电不传数据？换一根试试。
- 手机上有没有弹出「允许 USB 调试」的对话框？要点确定。
- Chrome 版本是不是太旧了？更新一下。
第二步：打开 WebView 的调试开关
这一步很关键。默认情况下，App 里的 WebView 是不开启调试的。你需要让开发人员在 Android 代码里加上一行：
// 在 Activity 的 onCreate 中
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}注意：正式发布的 APK 一定要去掉这行代码，否则会有安全风险。我一般会在 build.gradle 里加一个 debug 专用的配置：
android {
buildTypes {
debug {
// 只有 debug 版本才开启 WebView 调试
buildConfigField "boolean", "WEBVIEW_DEBUG", "true"
}
release {
buildConfigField "boolean", "WEBVIEW_DEBUG", "false"
}
}
}然后在代码里判断：
if (BuildConfig.WEBVIEW_DEBUG) {
WebView.setWebContentsDebuggingEnabled(true);
}第三步：开始调试 WebRTC
回到 chrome://inspect 页面，点击你设备下的「inspect」链接。会弹出一个新的 DevTools 窗口，里面显示的就是手机 WebView 里的页面。
这时候你可以：
- 看 Console 日志：WebRTC 的 ICE 状态、连接错误、SDP 信息都会打印出来
- 看 Network 面板：检查信令服务器的 WebSocket 连接是否正常
- 看 Sources 面板：打断点调试 JavaScript 代码
- 看 Application 面板：检查 LocalStorage、IndexedDB 等存储
我个人最常用的是 Console 面板。在 WebRTC 代码里加一些关键日志：
// 监听 ICE 连接状态变化
peerConnection.oniceconnectionstatechange = () => {
console.log('[WebRTC] ICE 状态:', peerConnection.iceConnectionState);
};
// 监听连接状态变化
peerConnection.onconnectionstatechange = () => {
console.log('[WebRTC] 连接状态:', peerConnection.connectionState);
};
// 监听候选者收集
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
console.log('[WebRTC] ICE 候选者:', event.candidate.candidate);
}
};为什么这么做？因为移动端 WebView 的日志不会自动保存，你没法像 PC 那样按 F12 看。有了这些日志，一旦出问题，你就能在 DevTools 里看到完整的调用链。
第四步：模拟移动端网络环境
WebRTC 对网络波动特别敏感。在 PC 上调试时，你可以用 DevTools 的 Network 面板模拟 3G、4G 网络。但在移动端，你没法直接在手机上模拟。
我的做法是：在 PC 的 DevTools 里，点击「Network conditions」标签，勾选「Emulate network conditions」，然后选择「Slow 3G」或「Fast 3G」。这样手机 WebView 里的网络请求也会受到限制。
不过要注意，这个模拟只对 HTTP/HTTPS 请求有效，对 WebRTC 的 UDP 媒体流影响有限。要真正测试弱网环境，还是得用专门的网络损伤工具，比如 Clumsy 或 NetEm。
常见问题与避坑指南
我在项目里遇到过不少坑，挑几个典型的说说：
症状：调用 navigator.mediaDevices.getUserMedia 返回 undefined 或直接报错。
原因：Android WebView 默认没有开启摄像头和麦克风权限。需要在 AndroidManifest.xml 里声明：
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />同时，在代码里动态请求权限（Android 6.0+）：
if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)
!= PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this,
new String[]{Manifest.permission.CAMERA}, REQUEST_CAMERA);
}症状：RTCPeerConnection 未定义。
原因：某些旧版 Android 系统（4.4 以下）的 WebView 不支持 WebRTC。或者 App 使用了旧版 WebView 内核。
解决方案：
- 升级 Android System WebView（通过 Google Play 更新）
- 在 App 里使用 Chrome Custom Tabs 代替 WebView
- 或者使用第三方 WebRTC 库，如 Jitsi Meet SDK
症状：chrome://inspect 页面一直显示「Pending」或「Offline」。
我曾经遇到过这个问题，折腾了半天发现是 USB 线的问题。换了一根原装线就好了。另外，有些电脑的 USB 端口供电不足，也会导致连接不稳定。建议用电脑背面的 USB 接口。
知识体系总览
下面这张图总结了移动端 WebRTC 调试的核心流程：
写在最后
移动端 WebRTC 调试其实没那么玄乎。核心就三点：USB 连接要稳、WebView 调试要开、日志要打全。把这三点做到位，大部分问题都能在 DevTools 里定位到。
我个人习惯是在开发阶段就把调试环境搭好，每次改完代码都真机跑一遍。别等到集成测试才发现问题，那时候定位成本就高了。
嗯，今天就聊到这儿。如果你在调试过程中遇到什么奇葩问题，欢迎来公众号找我聊聊。