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

先说个实用场景：你需要在浏览器里录下一套操作流程，比如填写注册表单、点击提交按钮、验证跳转结果，然后让它自动回放一遍。Google浏览器自带的Recorder面板就能搞定这件事，而且不装任何插件。录下来的操作可以导出成JSON，方便后续调试或生成自动化脚本。

启用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/na vigate这类结构化动作。

停止并保存录制结果

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

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

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

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

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

回放已录制的操作

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

方法一：全量重放
1、左侧录制列表中选中刚保存的条目。
2、点击顶部绿色三角形 Play 按钮，自动执行全部步骤。

方法二：单步调试
1、点击 Step over 按钮（图标是向右箭头加竖线）。
2、每点一次，只执行当前高亮步骤，并暂停等待确认；失败步骤会标红并提示具体原因，比如“Element not found”或“Timeout”。

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