Frontend Testing Debugging

Skill 用途

前端功能与视觉问题复现、修复和验收。围绕本地前端的真实交互、控制台、响应式布局和视觉回归形成验证闭环。

它适合材料、目标和验收标准都能说清的真实任务。先用小范围样本验证，再决定是否扩大处理范围。

输入和输出

适合场景与触发条件

任务涉及已渲染页面、交互故障、响应式问题或浏览器运行时异常时。

开始前还要准备：本地开发服务；浏览器插件或 Playwright 环境。如果任务很小、没有重复价值或无法判断结果是否正确，按当前任务直接处理会更合适。

核心工作流程

1. 选择浏览器路径
2. 运行目标流程
3. 检查控制台与网络
4. 跨视口复验
5. 保存证据

安装与启用

从 OpenAI Plugins 的 build-web-apps 插件使用；运行前确认浏览器能力和项目启动方式。

1. 从官方插件仓库确认当前 Skill 目录、引用资料与依赖。
2. 按 Codex Plugins 当前安装方式启用完整插件，不要只复制一个 SKILL.md。
3. 在一个低风险小任务中明确点名 Frontend Testing Debugging，并给出材料、范围和验收要求。
4. 完成后按预期输出逐项检查：复现步骤和原因；修复后的浏览器证据、日志与截图。

插件安装方式可能随 Codex 版本变化，执行前以官方仓库和当前客户端界面为准。

使用方法与结果验证

1. 选择浏览器路径
2. 运行目标流程
3. 检查控制台与网络
4. 跨视口复验
5. 保存证据
6. 最后核对交付是否同时包含：复现步骤和原因；修复后的浏览器证据、日志与截图。

验收时要回到原始材料、目标输出和任务边界逐项检查，不能只看是否生成了结果；发现稳定问题后，再把修正写回工作流。

权限风险

• 浏览器可能访问登录态和本地数据
• 测试脚本可能触发写操作
• 生产账号和不可逆流程必须另行授权

联网、账号授权、外部写入、部署、发布或其他不可逆操作都需要按实际风险单独确认，先从只读和小范围任务开始。