--- name: debug-helper description: Help debug code by analyzing error messages, identifying root causes, and providing fix suggestions. license: CC0-1.0 --- # Debug Helper > 帮助调试代码，分析错误信息，定位问题根源，提供修复建议。 > > Help debug code by analyzing error messages, identifying root causes, and providing fix suggestions. ## When to Use 当用户请求以下操作时使用此 skill： - 调试代码 / Debug code - 分析错误信息 / Analyze error messages - 修复 bug / Fix bugs - 理解异常原因 / Understand exception causes - 排查问题 / Troubleshoot issues ## Instructions ### 调试步骤 / Debugging Steps 1. **收集信息** - 获取错误信息、堆栈跟踪、相关代码 2. **分析错误** - 理解错误类型和消息含义 3. **定位根源** - 找到导致问题的代码位置 4. **提供解决方案** - 给出具体的修复建议 5. **预防建议** - 提供避免类似问题的建议 ### 常见错误类型 / Common Error Types | 错误类型 | 可能原因 | |----------|----------| | TypeError | 类型不匹配、空值操作 | | ReferenceError | 未定义变量、作用域问题 | | SyntaxError | 语法错误、缺少括号/引号 | | RuntimeError | 运行时逻辑错误 | | NetworkError | 网络请求失败、超时 | ### 分析框架 / Analysis Framework 对于每个错误，需要分析： - **What**: 发生了什么错误 - **Where**: 错误发生在哪里 - **Why**: 为什么会发生 - **How**: 如何修复 ### 输出格式 / Output Format 使用 `templates/debug-report.md` 模板格式化输出。 Use the `templates/debug-report.md` template to format output. ```markdown ## 调试分析报告 / Debug Analysis Report ### 错误概述 / Error Summary [错误类型和简要描述] ### 根本原因 / Root Cause [详细分析] ### 修复方案 / Fix [具体代码修改] ### 预防建议 / Prevention [如何避免类似问题] ``` ## Examples ### 输入 / Input 错误信息： ``` TypeError: Cannot read properties of undefined (reading 'map') at UserList (UserList.jsx:15:23) at renderWithHooks (react-dom.development.js:14985:18) ``` 相关代码： ```jsx function UserList({ users }) { return (

{user.name}

); } ``` ### 输出 / Output ## 调试分析报告 ### 错误概述 `TypeError: Cannot read properties of undefined (reading 'map')` 在 `UserList` 组件第 15 行调用 `.map()` 时，`users` 变量为 `undefined`。 ### 根本原因 1. **直接原因**: 尝试在 `undefined` 上调用 `.map()` 方法 2. **深层原因**: - 父组件可能没有传递 `users` prop - 数据获取尚未完成时组件已渲染 - API 返回格式与预期不符 ### 修复方案 **方案 1: 添加默认值（推荐）** ```jsx function UserList({ users = [] }) { return (

{user.name}

); } ``` **方案 2: 条件渲染** ```jsx function UserList({ users }) { if (!users || users.length === 0) { return

No users found

; } return (

{user.name}

); } ``` **方案 3: 可选链操作符** ```jsx function UserList({ users }) { return (

{user.name}

); } ``` ### 预防建议 1. **使用 TypeScript** - 添加类型检查 ```typescript interface Props { users: User[]; } ``` 2. **添加 PropTypes** - 运行时类型检查 ```jsx UserList.propTypes = { users: PropTypes.array.isRequired }; ``` 3. **检查数据源** - 确保父组件正确传递数据 4. **处理加载状态** - 在数据获取期间显示加载指示器

debug-helper

Scan your own AI components