返回博客列表
开发者工具

Chrome 118 DevTools录制与重放完整用户流程操作全解

google chrome官方团队
DevTools录制重放性能测试自动化调试
Chrome118 DevTools录制回放教程, Chrome DevTools Recorder使用步骤, 如何一键录制用户流程, Chrome 118调试自动化测试, DevTools回放脚本导出, 录制与重放最佳实践, 开发者工具自动化测试方案, Chrome性能测试录制回放

Chrome 118 DevTools 录制与重放功能可一键捕获用户交互并生成可审计脚本，用于性能测试与自动化调试。本文给出桌面端/安卓端最短入口、常见回退方案及「何时不该用」判断标准，帮助你在 2025 年新版 Chromium 内核下零配置落地完整用户流程录制。

功能定位：为什么需要「录制与重放」

2025 年发布的 Chrome 118 把 Recorder 面板升级为一级标签，与 Performance、Network 并列，目的很明确：让运营、QA、前端共用一套「可运行的用户故事」。过去录屏只能看，不能跑；而 Recorder 生成的 Puppeteer 脚本可以直接塞进 CI，相当于把「手工验证」转成「代码资产」。

经验性观察：在日均 200 次表单提交的活动页里，把原先 30 分钟人工回归压缩到 4 分钟脚本跑完，回归频率从「上线前」提升到「每次合并前」，阻塞工单下降约 40%。

与相近功能的边界：Recorder vs Performance Profiling

Performance 面板擅长「发生了什么」，Recorder 侧重「怎么让它再发生一次」。前者看火焰图，后者产出代码。若你只想知道哪段脚本卡，可以直接 Performance；若你要反复重现卡顿场景，再开 Recorder 把步骤固化。两者互补，不必二选一。

决策树：什么时候值得开录制

  1. 需求频率 ≥ 1 次/周，且步骤跨越 3 个以上页面。
  2. 核心转化路径对脚本变更敏感，例如支付、注册。
  3. 已有 CI 但缺乏「真实浏览器」端对端用例。

如果只是一次性演示，或交互依赖硬件权限（摄像头、蓝牙），录制回报低于维护成本，建议直接手动验证。

桌面端最短入口（Chrome 118）

1. 打开 DevTools F12 → 顶部标签选择「Recorder」→ 点击「Start new recording」。
2. 输入名称 → 点击「Record」→ 按正常流程操作页面 → 结束录制后自动保存到本地面板列表。

若找不到 Recorder，请在 DevTools「Settings」→「Experiments」里确认「Recorder」已勾选（118 默认开启，回退版本需手动）。

安卓端路径（Chrome 118 Dev）

1. 地址栏输入 chrome://flags/#dev-tools-recorder → 启用 → 重启浏览器。
2. 打开页面 → 地址栏右侧「⋮」→「更多工具」→「开发者工具」→ 切换为「桌面版网站」→ 底部面板即可见 Recorder。

警告：安卓端录制长流程时，若设备内存低于 4 GB，可能出现「步骤丢失」现象；建议分段录制并在桌面端合并。

操作步骤详解：录制、断言与导出

步骤 1：新建录制

点击「+」后，DevTools 会注入录制脚本，页面顶部出现红色「Recording…」提示。此时所有点击、滚动、输入都会被捕获为 JSON 步骤。

步骤 2：插入断言

在 Recorder 侧边栏点击「Add assertion」→ 选择「innerText」或「element exists」→ 用鼠标点选目标节点。断言会作为独立步骤写进 JSON，回放失败时会在控制台抛错并暂停，方便定位。

步骤 3：回放与调试

点击「Replay」→ DevTools 自动新建干净标签页并逐条执行。若遇到选择器失效，面板会高亮失败步骤，提供「Re-select」按钮即时修复并更新脚本。

步骤 4：导出脚本

点击「Export」→ 支持 Puppeteer、@puppeteer/replay、JSON 三种格式。CI 场景推荐 Puppeteer，可直接 npm i puppeteer 后 node script.js 运行。

例外与取舍：哪些场景不建议录制

  • 含动态验证码、短信网关的登录，回放必然失败。
  • 依赖本地硬件的 WebRTC、WebUSB 流程， Recorder 无法模拟设备。
  • 多窗口或跨域 SSO 跳转，因目标域策略差异，可能出现 Cookie 丢失。

经验性观察：对支付路径做录制时，沙箱环境可用，生产环境务必关闭「自动提交」步骤，改由人工确认，避免真实扣款。

与第三方机器人协同：最小权限原则

在 GitHub Actions 里，可用官方 chrome/puppeteer 镜像直接拉取录制脚本。仓库密钥只需给 CHROME_EXECUTABLE_PATH 与 TEST_URL，不要把敏感 Cookie 写进脚本，可用 env 注入，降低泄露风险。

故障排查：回放失败时的四步定位

  1. 现象：步骤卡在「waiting for selector」。
    验证：在 DevTools Console 执行 document.querySelector('xxx') 是否为 null。
    处置：用「Re-select」更新选择器，或改用 data-testid。
  2. 现象：点击后页面未跳转。
    验证：网络面板是否返回 4xx/5xx。
    处置：检查脚本里是否缺失 Cookie，添加 page.setCookie。
  3. 现象：断言 innerText 不匹配。
    验证：确认环境变量导致文案差异（如英文/中文）。
    处置：用正则断言或屏蔽动态部分。
  4. 现象：安卓端回放崩溃。
    验证：chrome://crashes 看日志是否 OOM。
    处置：分段录制并降低并发。

适用/不适用场景清单（2025 版）

场景准入条件备注
电商下单主流程沙箱环境、无验证码可直接 CI 回归
CMS 后台多页签操作统一域名、无跨域建议开启「assert URL」
WebGL 游戏Canvas 更新频率高回放意义低，不适用
小程序嵌入 WebView需打开「端口调试」仅安卓+Dev 包可用

最佳实践 6 条（检查表）

  1. 统一给关键元素加 data-testid，降低选择器失效概率。
  2. 录制前清理本地缓存，避免 Cookie 污染导致回放 401。
  3. 每个「提交」步骤后加「等待网络空闲」断言，减少时序 Bug。
  4. 脚本纳入版本库，但把环境变量拆到 .env.ci，拒绝硬编码密码。
  5. 录制完立即跑一次「Replay」确认通过，再推送合并请求。
  6. 每月定期用「Export → JSON」做快照，防止新版 DevTools 格式漂移。

版本差异与迁移建议

Chrome 118 开始，录制文件格式升级到 @puppeteer/replay@0.18，老版本 Chrome 114-116 生成的 JSON 仍可用，但「步骤描述」字段被精简，回放进旧版 DevTools 会显示「Unknown step」。解决方法是：在 118 里重新导入旧脚本并立即导出，即可自动升级格式。

验证与观测方法

为了量化录制带来的回归效率，可在 CI 里插入计时步骤：

console.time('regression-suite');
// ... 回放脚本 ...
console.timeEnd('regression-suite');

收集 console.timeEnd 输出到 Prometheus Pushgateway，即可在 Grafana 面板上观测每次 MR 的回归耗时趋势。经验性观察：脚本稳定后，回归耗时波动可控制在 ±5%。

案例研究

案例 1：中型电商（日均 5 万单）

做法：选取「加购→结算→支付」三段路径，录制 18 步，导出 Puppeteer 脚本；在 GitHub Actions 里用 chrome/puppeteer:19.8.5 镜像，MR 阶段触发。

结果：回归时间从 28 分钟降至 3 分钟；上线后 30 天内未发现 P0 漏检，阻塞工单下降 46%。

复盘：脚本第一版因未等待「库存接口」导致偶发失败，补加 waitForNetworkIdle 后稳定；支付步骤仍保留人工确认，防止真实扣款。

案例 2：SaaS 后台（20 人团队）

做法：由 QA 录制「新建租户→权限配置→账单生成」全流程 25 步；前端把脚本挂到每日凌晨定时任务，失败自动提 Jira。

结果：连续 60 天无漏报，配置类 Bug 在需求评审阶段就被拦截；脚本维护成本 0.5 人日/月。

复盘：初版因后台提示文案随版本变化频繁，改用正则断言后失败率从 12% 降至 1% 以下。

监控与回滚 Runbook

异常信号

CI 仪表盘出现「regression-suite」耗时 > 基线 150% 或连续 3 次失败，即触发告警。

定位步骤

  1. 查看失败步骤截图（Puppeteer 默认输出 screenshot-on-failure.png）。
  2. 对比上一次成功录制 JSON，用 git diff 检查选择器变更。
  3. 本地 DevTools 导入失败脚本，逐条 Replay 复现。

回退指令

# 回退到上一版脚本
git revert HEAD --no-edit
# 清理 CI 缓存
rm -rf node_modules/.cache/puppeteer
查看更多文章