从 QtScrcpy 到 TabQA：如何在浏览器侧边栏搞定 Android 投屏与测试提单？
在移动端 Android 测试与开发中，Scrcpy 以及基于它封装的图形化工具 QtScrcpy，一直是非常受欢迎的投屏神器。凭借极低的画面延迟和对硬件性能的高效利用，它们解决了"在电脑大屏上流畅操作手机"的诉求。
但在真实的测试与 Bug 提单现场，许多测试工程师和开发者都会遇到一个普遍的困惑：
"手机画面投在电脑上了，但提单时该抓的日志、该录的视频、该看的网络请求，依然要手忙脚乱地到处切换工具去凑。"
为了提交一份开发能直接看懂、能够稳定复现的 Bug 报告，往往需要投屏软件、终端命令行、系统录屏、截图工具和抓包代理轮番上阵。
今天聊一聊一种新的解决思路------基于浏览器扩展的测试工作台 TabQA，看它是如何在 Chrome 侧边栏中，将 Android 投屏、日志捕获、网络抓包与缺陷归档整合为一套完整工作流的。
1. 传统投屏测试中的协同痛点
QtScrcpy 核心解决的是"屏幕镜像与控制"。但当进入功能测试和 Bug 验收阶段时，往往会面临以下断层：
- 工具窗口割裂 ：左边是网页端的 Jira / TAPD 提单系统，中间是 QtScrcpy 投屏窗口，右边是运行
adb logcat的终端，后台还开着屏幕录制工具。测试过程中不仅视线分散，遇到突发问题时更是容易手忙脚乱。 - 本地环境配置门槛 ：传统工具依赖电脑本地运行的 ADB 服务。如果办公电脑缺少 Android 开发环境、缺少驱动，或者多个工具引发
adb server version doesn't match端口冲突，光是排查连接就要耗费不少时间。 - 偶发 Bug 的证据缺失：偶现的崩溃和 ANR 往往发生在无准备的瞬间。事后补录通常难以复现，而全量常驻录屏又会产生体积巨大、难以归档的视频文件。
- H5 与 WebView 抓包成本高：遇到混合 App（Hybrid）或内嵌 H5 异常时，传统抓包往往需要给电脑安装 Charles / Fiddler 并配置手机代理；遇到 Android 7+ 默认不信任用户 CA 根证书时，还需要重新打包或改配置。
2. 认识 TabQA：运行在浏览器侧边栏的 Android 测试工作台
TabQA 是一款运行在 Chrome 和 Edge 浏览器侧边栏中的 Android 测试扩展。
与传统桌面端投屏软件最大的不同在于，TabQA 采用了浏览器原生连接 与测试链路闭环的设计理念：
- 无需本地安装 ADB：底层直接通过现代浏览器的 WebUSB 接口与 Android 设备通信，无需电脑安装 SDK 或启动任何本地 ADB 后台服务；
- 常驻浏览器侧边栏（Side Panel）：无需在桌面打开多余窗口，左侧浏览用例与提单，右侧侧边栏直接操控真机；
- 测试证据一体化交付：在操作手机的同时，同步完成日志过滤、录屏回捞、接口抓包与截图标注，直接生成开发可排查的缺陷报告。
3. TabQA 的核心功能体验
3.1 免装客户端与本地 ADB，插线即用
以往换了新电脑或非开发人员（如产品、交互设计师）想辅助复现 Bug，配置环境是一大门槛。
TabQA 运行在浏览器内部。只要手机开启系统的"USB 调试"，通过数据线连上电脑，在 Chrome 侧边栏点击授权设备，就能直接在浏览器内拉起真机投屏画面，支持鼠标点击、滑动操作与文字输入。
3.2 告别漏录："回捞模式" + 自动 Logcat 异常标记
为了解决"复现了 Bug 却没录上画面"的痛点，TabQA 提供了回捞录屏模式：
- 支持持续滚动录制。当操作过程中发生异常时，点击保存即可向前截取最近 30 秒至 3 分钟的关键操作片段，自动去除了前置冗余的操作，只保留核心复现过程。
- 投屏期间，TabQA 会在后台自动跟踪当前目标 App 的日志流。当检测到
Error、Crash或ANR时，投屏标题旁会有显著的状态提醒。测试完成后，自动将本次操作时间段内的崩溃日志提取为精简附件，告别在几十万行 logcat 中大海捞针。
3.3 免配 CA 证书，直抓 Android Chrome 与 WebView 请求
在混合开发或测试 App 内嵌 H5 页面时，网络抓包是排查问题的关键。
TabQA 利用了 Chromium 内置的调试协议（CDP），能够直接监听 Android Chrome 与已开启调试的 WebView 网络流量：
- 零配置：手机端不需要设置 Wi-Fi 代理，更不需要费心安装第三方 CA 根证书；
- 全要素查看：在侧边栏中即可直接查看请求 URL、状态码、Headers 与 Response 内容；
- 便捷导出：支持一键复制请求为 cURL 命令，或导出标准脱敏 HAR 文件，方便提供给后端接口同学分析。
3.4 截图标注与一键贴图提单
发现 UI 显示异常或数据错误时，可在投屏窗口随时截图。
- 内置红框、箭头、文字批注与打码工具，标出问题后直接保存在侧边栏附件列表中；
- 截图支持一键复制到剪贴板，能够直接 Ctrl+V / Cmd+V 粘贴进 Notion、飞书文档或 Jira；
- 测试结束时，可一键批量导出
report.md以及整合好的全部图片、视频和日志包。
3.5 Local-first 本地优先，数据安全透明
对于测试团队而言，内网数据与待测资产的安全性至关重要。
- TabQA 遵循本地优先原则，所有 USB 通信、录像、截图与日志均保存在浏览器本地，不向任何第三方云端平台上传设备数据；
- 不对被测 App 注入任何侵入性 SDK，不修改应用包体。
4. QtScrcpy 与 TabQA 的特性与适用场景对比
| 对比维度 | QtScrcpy / 传统 Scrcpy | TabQA 浏览器工作台 |
|---|---|---|
| 运行宿主 | 独立的桌面端 GUI 程序 | Chrome / Edge 浏览器侧边栏 |
| ADB 依赖 | 强依赖宿主机本地 ADB 及端口 | 无需本地 ADB（基于浏览器 WebUSB 直连） |
| 投屏性能定位 | 极致高帧率（适合游戏投屏、群控操控） | 敏捷交互（专注业务测试、提单复现） |
| 日志跟踪能力 | 纯投屏，无日志采集（需额外开终端） | 自动跟踪目标 App，高亮 Crash/ANR 并提取堆栈 |
| 移动端网络抓包 | 无抓包功能（需额外配置 Charles/代理） | 内置 CDP 抓包（WebView 免装根证书） |
| 录屏与证据提取 | 需依赖外部录屏软件手动剪辑 | 滚动回捞录制，自动打包视频与日志 |
| 提单闭环 | 截图、视频、日志分散在不同路径 | 一键生成结构化 Markdown 报告与附件 |
| 典型适用人群 | 手游玩家、长视频录制者、多机群控 | 移动端 QA、跨端前端、全栈自测、产品复现 |
5. 环境要求与使用建议
如果你想在日常工作中尝试这种侧边栏轻量测试工作流，只需满足以下基础环境：
- 浏览器：Chrome 118+ 或 Microsoft Edge 118+；
- 移动设备：Android 8.0 及以上版本真机；
- 准备工作：手机在"开发者选项"中开启"USB 调试"，并使用数据线连接电脑即可。
TabQA 已经在 Chrome Web Store 和 Edge Add-ons 正式上线，项目代码也已在 GitHub 开源（搜索 openutx/TabQA 即可查看）。
总结
在工具链的选择上，并没有非此即彼的绝对优劣。如果你的核心目的是大屏玩手游、多机脚本同步控制或追求极限 120fps 画面，QtScrcpy 依旧是性能极为彪悍的选择。
但如果你的工作日常是在网页里查用例、在手机上点功能、发现 Bug 抓日志查接口，再把附件一个个贴到提单系统里，那么 TabQA 这种将投屏、抓包、日志与交付收敛在浏览器侧边栏的轻量化方案，能切实帮你少开几个桌面窗口，把提单的琐碎耗时降到最低。