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 (
    <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。

根本原因

1. 直接原因: 尝试在 undefined 上调用 .map() 方法
2. 深层原因:

• 父组件可能没有传递 users prop
• 数据获取尚未完成时组件已渲染
• API 返回格式与预期不符

修复方案

方案 1: 添加默认值（推荐）

jsx
function UserList({ users = [] }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

方案 2: 条件渲染

jsx
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: 可选链操作符

jsx
function UserList({ users }) {
  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

预防建议

1. 使用 TypeScript - 添加类型检查

typescript interface Props { users: User[]; }

1. 添加 PropTypes - 运行时类型检查

jsx UserList.propTypes = { users: PropTypes.array.isRequired };

1. 检查数据源 - 确保父组件正确传递数据
2. 处理加载状态 - 在数据获取期间显示加载指示器