DEMO · 无需安装扩展 · 单文件可离线运行

把一次真实操作,录制、理解、并讲成一份教程

浏览器操作图文教程录制器(AI 增强版)。录制时同步采集元素语义、为截图自动打码; 录制后由内置引擎自动生成导读、章节与步骤说明,配上问答助手、选择器自愈与流程回放。 不配置任何模型也能完整使用,配上模型后说明文案与问答质量再上一层。

7AI 能力模块
0必需的外部依赖
3导出格式
100%离线可用
关于本 DEMO 的数据:「教程成品」一节里的步骤说明与 AI 导读,是按配置模型后的产出样式预置的样例数据, 这样你一眼能看到成品效果;页面里其余所有交互 —— 自然语言建流程、流程体检、生成后自动定位、选择器打分、选择器自愈、失败诊断、隐私脱敏、流程瘦身、执行复盘 —— 都是当场调用页面内真实运行的内置引擎算出来的,不是写死的展示文案。 「执行复盘」一节的输入数据模拟的是回放器实测结果,但复盘结论本身同样是引擎现场生成的。 「自然语言建流程」一节的自动定位,真的在下方那块模拟页面的 DOM 上跑了一遍语义匹配(范围只限那块,不会碰到 DEMO 自己的界面)。 教程里的「✨ AI 重写全部说明」按钮点下去,用的也是真实引擎,可以直接对比两种文案风格。
1

教程成品 · AI 导读 + 章节 + 问答

这是插件真实的输出形态:一份可交互的 HTML 教程。往下滚动可以看到 AI 导读卡、章节标题条、章节导航, 右下角是问答助手,每个步骤右上角有 ✨ 单步重写。下面的内容是活的,直接操作即可。

成品文件本身也是单文件、可离线双击打开
chrome-extension://…/tutorial.html
2

自然语言 → 可回放流程

用一句话描述操作,解析成流程节点树(页面 / 动作 / 等待 / 循环 / 条件)。这是本地引擎的纯规则解析, 分句时会把 URL、小数、条件句保护起来,不会被逗号和句号切碎。

但自然语言天生给不出 CSS 选择器 —— 所以生成之后会立刻做一次流程体检: 把还缺的东西逐条列出来,能自动补的当场补掉,补不了的才交给你。不塞一个半成品给你。

↓ 解析完立刻做一次流程体检:仍然缺的会被逐条列出来,并分成「AI 能自动补」和「需要你确认」两类
↓ 下面这块是模拟的目标页面。点「AI 自动定位」,引擎会真的在这个 DOM 上采集候选元素、按语义打分, 把能补的选择器补上 —— 补不上的才需要你动手拾取。
crm.example.com/login
只扫上面这块模拟页面,不碰 DEMO 自己的界面
3

选择器稳定性打分

录制时会为每个元素收集多个候选选择器。回放能不能活过下一次前端改版,取决于选了哪一个。 引擎会识别 css-1x2y3z、sc-bdVaJa、:nth-of-type 这类脆弱写法并降权。

每行一个选择器
4

选择器自愈

回放失败不再直接中断:拿「这步本来要操作什么」去当前页面的候选元素里做语义匹配, 重新定位成功后把新选择器写回流程,下次运行就不再需要自愈。
下面这组数据刻意用了上面教程第 5 步的元素 —— 它原本记下的是会随构建变动的 #login-submit-v2,正是靠自愈换成了现在显示的稳定选择器。

录制时的目标
当前页面上的候选元素
5

回放失败诊断

流程跑挂了最怕只有一句「元素未找到」。诊断模块会结合报错文本、出错步骤、目标 URL 给出可能原因与对应的修复动作,并支持一键重新拾取选择器。

6

隐私脱敏(两层)

字段级:密码、验证码、身份证、银行卡这类输入框的值根本不入库。 像素级:截图在落盘之前就把敏感区域涂黑,敏感像素从不进入存储。 下面两个都可以实时把玩。

字段级 + 文本级打码(边打边看)
像素级遮盖(截图落盘前完成)
7

流程瘦身 · 去重与补等待

录制出来的步骤天然带噪音:同一个输入框被连续记了三次、每次滚动都留一条。 去重是无损的(保留最后一次的值);补等待只给真有异步副作用的动作加,输入、选择这类瞬时动作不会白等。
在插件里,这两项对应流程编辑器工具栏的 ⏳ 补等待 与 🧹 瘦身去重 按钮,点一下即作用于当前流程。

① 重复步骤合并
② 自动补等待
8

执行复盘

跑完只丢一句「成功」等于没跑。复盘把回放器实测到的数据 —— 总耗时、异常、自愈次数、最慢的一步 —— 翻译成人话,并指出下次该动哪个节点。下面的数据都是当场算出来的。

← 考拉的个人站
陕ICP备2026027573号-1·陕公网安备61011302002783号
⬇ 下载扩展 (.zip)