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
-
收集信息 - 获取错误信息、堆栈跟踪、相关代码
-
分析错误 - 理解错误类型和消息含义
-
定位根源 - 找到导致问题的代码位置
-
提供解决方案 - 给出具体的修复建议
-
预防建议 - 提供避免类似问题的建议
常见错误类型 / 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.
调试分析报告 / 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)
相关代码：
function UserList({ users }) { return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }
输出 / Output
调试分析报告
错误概述
TypeError: Cannot read properties of undefined (reading 'map')
在 UserList 组件第 15 行调用 .map() 时，users 变量为 undefined 。
根本原因
-
直接原因: 尝试在 undefined 上调用 .map() 方法
-
深层原因:
-
父组件可能没有传递 users prop
-
数据获取尚未完成时组件已渲染
-
API 返回格式与预期不符
修复方案
方案 1: 添加默认值（推荐）
function UserList({ users = [] }) { return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }
方案 2: 条件渲染
function UserList({ users }) { if (!users || users.length === 0) { return <p>No users found</p>; }
return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }
方案 3: 可选链操作符
function UserList({ users }) { return ( <ul> {users?.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }
预防建议
使用 TypeScript - 添加类型检查
interface Props { users: User[]; }
添加 PropTypes - 运行时类型检查
UserList.propTypes = { users: PropTypes.array.isRequired };
检查数据源 - 确保父组件正确传递数据
处理加载状态 - 在数据获取期间显示加载指示器