入门实战案例二之调试优化

视频链接

【Claude Code 实战教程】网站调试优化全过程！Claude + Cursor + BrowserTools 自动修复所有问题+提升体验本期视频展示如何用 Claude Code 调试并优化一个 AI 声音克隆网站。通过 Cursor 管理任务，BrowserTools 提供调试信息，Claude 自动识别错误、修复逻辑、改交互，适合初学者掌握实战开发与用户体验打磨方法。

内容

定位报错
网站左下角出现红色错误提示 → 需全面排查隐藏问题。
调试方式对比
- 手动方式：复制浏览器控制台日志 → 粘贴给 Claude 分析。
- 高效方式：安装 BrowserTools MCP，让 Claude 直接读取调试信息。
  官方地址：
  Installation – AgentDesk – BrowserToolsMCP
安装与配置 BrowserTools
- a. 下载浏览器插件压缩包并解压至本地。
- b. 浏览器扩展页面 → 开启开发者模式 → 加载未打包扩展程序 → 选择解压文件夹。
- c. 在 Cursor 终端安装服务端并启动（占用端口 3025）：
  - 安装命令：claude mcp add browser-tools npx @agentdeskai/browser-tools-mcp@latest
  - 启动命令：npx @agentdeskai/browser-tools-server@1.2.0
- d. claude -c 继续会话 → /mcp 确认 BrowserTools 已连接。
- e. 浏览器 DevTools → 插件设置页：
  - 截图路径：
  - 端口号：3025 → 点击 Test Connection 显示 “连接成功”。
自动调试流程
- Claude 通过 BrowserTools 抓取错误日志 → 自动定位并修复代码。
- 多轮“刷新网页 → 获取日志 → 修复”直至错误提示消失。
- 调试完成：执行 /clear 释放上下文 → /init 更新记忆 → Git 存档当前状态。
元素选取器优化界面
- 上传区域文案：仅单文件、时长 30–90 s、格式 MP3/WAV。
- 上传成功后展示文件名并提供删除按钮。
- 模型名称：检测重名并提示替换建议。
- 删除无用模型描述输入框。
- 替换假进度条为真实训练状态。
- 验证模型列表“删除”功能正常。
文本转语音（TTS）界面调整
- 移除高级语音设置面板，保留默认参数。
- 删除重复“重置”按钮，仅保留播放/下载。
- 简化导出：点击“下载音频”直接保存 MP3，无需选择格式。
最终回归测试
- 刷新网页 → 新建声音模型 → 生成 TTS 音频 → 播放与下载均正常。
- 核心功能稳定，UI 简洁；下一步进行视觉美化。

入门实战案例二之调试优化 ​

视频链接 ​

内容 ​

入门实战案例二之调试优化

视频链接

内容