---

name: verify-feature description: 功能开发完成后的验证流程 - 构建 WASM 并启动开发服务器进行预览测试

// turbo-all

功能验证流程 (Verify Feature)

当一个功能开发完成后，使用此 skill 来验证功能是否正常工作。

验证步骤

步骤 1: 构建 WASM 模块

首先运行 WASM 构建命令，将 Rust 代码编译为 WebAssembly 模块：

Copynpm run wasm:build

注意事项：

• 确保 Rust 和 wasm-pack 已正确安装
• 如果构建失败，检查 Rust 代码中的编译错误
• 构建成功后会在 pkg/ 目录下生成 WASM 文件

步骤 2: 启动开发服务器

构建成功后，启动 HTTP 服务器进行预览：

Copynpm run dev:server

注意事项：

• 服务器默认端口是 8080（如果被占用会使用其他端口）
• 启动后不要关闭终端，保持服务器运行
• 使用 Ctrl+C 停止服务器

步骤 3: 使用浏览器自动化测试

使用 Antigravity 的 browser_subagent 工具打开浏览器并测试页面：

1. 打开测试页面

   • 使用 browser_subagent 工具导航到 http://localhost:8080/www/index.html
   • 等待页面完全加载

2. 验证页面状态

   • 检查页面是否正常显示
   • 确认没有明显的加载错误
   • 如果有 canvas 元素，确认其已渲染

3. 测试新功能

   • 根据开发的具体功能进行交互测试
   • 点击按钮、输入数据等操作
   • 验证功能是否按预期工作

4. 检查控制台

   • 查看浏览器控制台是否有错误信息
   • 记录任何警告或异常

browser_subagent 使用示例：

CopyTask: 导航到 http://localhost:8080/www/index.html，等待页面加载完成，
      检查页面是否正常显示，验证 canvas 元素是否存在并已渲染，
      报告页面状态和任何错误信息。

步骤 4: 验证结果汇报

完成测试后，汇报以下内容：

1. WASM 构建是否成功
2. 服务器是否正常启动
3. 页面是否正常加载
4. 新功能是否按预期工作
5. 是否存在任何错误或警告

常见问题排查

WASM 构建失败

• 检查 Cargo.toml 中的依赖配置
• 确认 wasm-bindgen 版本兼容性
• 查看 Rust 编译器的详细错误信息

服务器启动失败

• 检查端口是否被占用
• 确认 http-server 已正确安装
• 尝试手动指定其他端口

页面加载后 WASM 未生效

• 检查浏览器控制台的错误信息
• 确认 pkg/ 目录下的文件已更新
• 清除浏览器缓存后重试

快速命令参考