如何在Google浏览器中通过开发者工具录制网页操作路径？

Google浏览器可通过启用Recorder面板自动记录用户点击、输入、跳转等交互操作并支持回放验证：先在开发者工具实验设置中开启Enable Recorder，重启后新建录制、执行操作、停止保存为JSON，再通过全量或单步方式回放调试。

你想在Google浏览器中把用户点击、输入、跳转这一整套操作过程自动记下来，方便后续重放验证或生成自动化脚本，而不是靠人眼盯住每一步手动复现。

启用Recorder面板

Recorder功能默认不显示，必须先在实验性设置里手动打开，否则顶部标签栏根本看不到那个烧杯图标。

1、按 F12 打开开发者工具。

2、点击右上角三个点 → Settings → 左侧选 Experiments。

3、在搜索框输入 recorder，勾选 Enable Recorder 选项。

4、关闭设置页，必须完全退出开发者工具再重新按F12打开，否则新标签不会出现。

开始录制操作流程

录制前不用预设任何条件，只要页面已加载完成，就能直接捕获真实交互行为。

1、顶部标签栏找到 Recorder（图标是烧杯），点击进入。

2、点左上角 + New recording。

3、输入名称（如“注册流程”），取消勾选“Record mouse movements”——鼠标移动轨迹会极大增加冗余步骤，且多数测试场景无需它。

4、点击 Start recording，此时录制已激活，但页面尚未开始操作。

5、立即切换到目标网页标签页，执行你要记录的动作：填表单、点按钮、跳链接、选下拉项……所有 DOM 交互都会被识别为 click/input/navigate 等结构化动作。

停止并保存录制结果

停止后立刻生成可读的步骤列表，支持即时编辑和导出，这是后续调试和复用的基础。

1、回到 Recorder 面板，点击右上角红色方块 Stop 按钮。

2、主区域按时间顺序列出全部动作，每条含类型、目标元素选择器、触发方式。

3、点击某步左侧三点图标 → Edit step，可修改选择器（比如原 selector 失效时）、添加等待延时或断言。

4、点击右上角磁盘图标 → Save as JSON，文件将保存为本地 .json 格式，包含完整操作链与元数据。

回放已录制的操作

回放不是简单播放，而是真实驱动浏览器执行每一步，能暴露元素不可见、加载超时等真实问题。

方法一：全量重放

1、左侧录制列表中选中刚保存的条目。

2、点击顶部绿色三角形 Play 按钮，自动执行全部步骤。

方法二：单步调试

1、点击 Step over 按钮（图标为向右箭头+竖线）。

2、每点一次，只执行当前高亮步骤，并暂停等待确认；失败步骤会标红并提示具体原因，比如 “Element not found” 或 “Timeout”。

注意：回放时若页面状态与录制时不一致（如弹窗未关闭、URL跳转异常），步骤会中断，需返回编辑环节修正选择器或插入等待逻辑。