debug-helper

name	debug-helper
description	帮助调试代码问题时使用。当用户遇到错误、bug、或代码不按预期工作时调用此技能。

调试助手技能

使用场景

• 代码报错需要修复
• 功能不按预期工作
• 性能问题排查
• 用户明确说"有 bug"或"不工作"

调试方法论

1. 问题定位

• 复现问题: 确认问题的具体表现
• 检查错误信息: 仔细阅读错误堆栈
• 缩小范围: 定位到具体的文件和代码行

2. 常见问题检查清单

JavaScript/TypeScript

• 变量是否未定义
• 类型错误
• 异步问题（Promise、async/await）
• 作用域问题
• null/undefined 检查

React

• 组件生命周期问题
• State 更新问题
• useEffect 依赖数组
• Props 传递错误
• Key 属性缺失

Next.js

• 客户端/服务端代码混用
• 环境变量配置
• 路由问题
• API 路由错误

3. 调试步骤

1. 阅读错误: 完整阅读错误信息和堆栈跟踪
2. 查看相关代码: 检查错误指向的代码位置
3. 检查最近改动: 如果是新出现的问题，检查最近的代码变更
4. 逐步排查: 从最可能的原因开始排查
5. 验证修复: 确保修复不会引入新问题

4. 调试工具建议

• Console.log: 添加日志输出查看变量值
• 浏览器 DevTools: 使用断点调试
• React DevTools: 检查组件状态和 props
• Network 面板: 检查 API 请求

输出格式

调试结果应该包含：

1. 问题分析: 说明问题的根本原因
2. 修复方案: 提供具体的修复代码
3. 预防措施: 建议如何避免类似问题