Debug Helper

Debug Helper

> 帮助调试代码，分析错误信息，定位问题根源，提供修复建议。

什么时候使用

当用户请求以下操作时使用此 skill：

• 调试代码
• 分析错误信息
• 修复 bug
• 理解异常原因
• 排查问题

操作说明

调试步骤

1. 收集信息 - 获取错误信息、堆栈跟踪、相关代码
2. 分析错误 - 理解错误类型和消息含义
3. 定位根源 - 找到导致问题的代码位置
4. 提供解决方案 - 给出具体的修复建议
5. 预防建议 - 提供避免类似问题的建议

常见错误类型

| 错误类型 | 可能原因 | |----------|----------| | TypeError | 类型不匹配、空值操作 | | ReferenceError | 未定义变量、作用域问题 | | SyntaxError | 语法错误、缺少括号/引号 | | RuntimeError | 运行时逻辑错误 | | NetworkError | 网络请求失败、超时 |

分析框架

对于每个错误，需要分析：

• What: 发生了什么错误
• Where: 错误发生在哪里
• Why: 为什么会发生
• How: 如何修复

输出格式

• 使用 templates/debug-report.md 模板格式化输出。
• 优先使用简体中文输出。

## 调试分析报告

### 错误概述
[错误类型和简要描述]

### 根本原因
[详细分析]

### 修复方案
[具体代码修改]

### 预防建议
[如何避免类似问题]

示例

输入

错误信息：

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 (
    
      {users.map(user => (
        {user.name}
      ))}
    
  );
}

输出

调试分析报告

错误概述

TypeError: Cannot read properties of undefined (reading 'map')

在 UserList 组件第 15 行调用 .map() 时，users 变量为 undefined。

根本原因

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

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

修复方案

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

function UserList({ users = [] }) {
  return (
    
      {users.map(user => (
        {user.name}
      ))}
    
  );
}

方案 2: 条件渲染

function UserList({ users }) {
  if (!users || users.length === 0) {
    return No users found;
  }

  return (
    
      {users.map(user => (
        {user.name}
      ))}
    
  );
}

方案 3: 可选链操作符

function UserList({ users }) {
  return (
    
      {users?.map(user => (
        {user.name}
      ))}
    
  );
}

预防建议

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

``typescript interface Props { users: User[]; } ``

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

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

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: rootsli
• Source: rootsli/claude-quickstart-cn
• License: CC0-1.0

Install and usage instructions live in the source repository linked above.