graph TD
    A[发现Bug] --> B[描述问题<br>(上下文+错误信息)];
    B --> C[AI深度分析];
    C --> D[获得解决方案];
    D --> E[验证修复];
    E --> F[结束];

# 场景：JavaScript语法错误
claude """
这段代码报错了，帮我修复：

```javascript
function calculateTotal(items) {
    let total = 0;
    for (let i = 0; i < items.length; i++ {
        if (items[i].price > 0) {
            total += items[i].price * items[i].quantity;
        }
    }
    return total;
}

#### TypeScript类型错误解决

当项目变得复杂，TypeScript 的类型错误会像瘟疫一样蔓延。AI 在这里的价值是系统性地解决问题。

```bash
claude """
TypeScript编译失败，请帮我系统性地解决这些类型问题。

错误信息：
- Argument of type 'string' is not assignable to parameter of type 'number'
- Property 'id' does not exist on type '{}'
- Cannot find name 'UserData'

涉及的代码文件：
- src/services/userService.ts
- src/components/UserForm.tsx
- src/types/user.ts
"""

# 果叔点评：
# 传统做法是逐个修复，容易遗漏。
# Claude会：
# 1. 分析所有相关文件的依赖关系。
# 2. 推断出缺失的 `UserData` 类型定义应该是什么样的。
# 3. 提供完整的类型定义文件和所有需要修改的代码片段。
# 4. 给出关于类型收窄和泛型使用的最佳实践建议。

claude """
这个快速排序函数有Bug，对于包含重复元素的数组，结果不正确。

```javascript
function quickSort(arr) {
    if (arr.length <= 1) return arr;
    
    const pivot = arr[0];
    const left = [];
    const right = [];
    
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    
    return quickSort(left).concat(pivot).concat(quickSort(right));
}

// 测试：
console.log(quickSort([3, 1, 4, 1, 5, 9, 2, 6]));
// 期望：[1, 1, 2, 3, 4, 5, 6, 9]
// 实际：[1, 2, 1, 3, 4, 5, 6, 9] (对于重复的1处理错误)
"""

# 果叔点评：
# 这是一个经典的算法陷阱，人脑需要回忆算法细节。
# Claude会：
# 1. 立即识别出问题在于等于 pivot 的元素被错误地全部分到了 right 数组。
# 2. 解释这会破坏排序的稳定性，并可能在特定数据下导致性能问题。
# 3. 提供多种修复方案，例如经典的“三路快排”分区法，并解释其优劣。
# 4. 提醒边界条件和潜在的栈溢出风险。

claude """
这个React组件的状态更新有问题，调用addUser后页面不刷新。

```jsx
function UserList() {
    const [users, setUsers] = useState([]);
    
    const addUser = (newUser) => {
        users.push(newUser); // 直接修改 state
        setUsers(users); // 传入的是同一个引用
    };

    return (
        <div>
            <button onClick={() => addUser({id: 3, name: 'Charlie'})}>Add User</button>
            {users.map(user => <div key={user.id}>{user.name}</div>)}
        </div>
    );
}

### 3. 性能问题诊断：从“能用”到“好用”

代码能跑通只是第一步，性能才是决定用户体验的生命线。

#### React性能瓶颈

```bash
claude """
这个组件在输入时非常卡顿，帮我分析并优化性能。

```jsx
function ProductList({ products, category, priceRange }) {
    
    // 每次渲染都会重新计算，性能杀手
    const filteredProducts = products.filter(product => {
        console.log('Filtering...'); // 会被频繁打印
        return product.category === category &&
               product.price >= priceRange.min &&
               product.price <= priceRange.max;
    });

    return (
        <div>
            {filteredProducts.map(product => (
                <ProductCard 
                    key={product.id} 
                    product={product}
                    // 内联函数导致子组件不必要的重渲染
                    onAddToCart={() => updateCart(product)}
                />
            ))}
        </div>
    );
}

### 4. 内存泄漏和资源管理：沉默的系统杀手

内存泄漏是最隐蔽、最难排查的 Bug 之一。

#### React内存泄漏

```bash
claude """
应用切换路由后，浏览器内存占用没有下降，怀疑有内存泄漏。

```jsx
function ChatRoom({ roomId }) {
    useEffect(() => {
        const socket = io(`/room/${roomId}`);
        
        socket.on('message', (message) => {
            // ... update state
        });
        
        const intervalId = setInterval(() => {
            socket.emit('heartbeat');
        }, 30000);
        
        // 问题：组件卸载时，这些监听和定时器没有被清理
    }, [roomId]);

    return (/* ... */);
}

useEffect(() => {
    // ... setup logic ...

    return () => {
        socket.disconnect();
        socket.off('message');
        clearInterval(intervalId);
    };
}, [roomId]);

## 高级调试技巧：从 Coder 到 Architect

掌握了以上技巧，你已经是一个高效的 Bug 修复者。但要成为架构师，你需要从系统层面思考问题。

### 1. 竞态条件 (Race Condition)：异步世界的幽灵

这是高并发和复杂前端应用中最棘手的 Bug 之一。

```bash
claude """
帮我分析这个React组件的竞态条件问题。快速切换用户ID时，有时会显示旧的用户数据。

```javascript
function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetchUser(userId).then(userData => {
            setUser(userData);
        });
    }, [userId]);

    // ... render user
}

## 实战案例：电商网站高并发订单创建失败

理论说再多，不如一场实战来得真切。这是一个我曾经咨询过的真实案例，稍作简化。

```bash
claude """
帮我调试这个复杂的生产Bug：

**问题描述：**
电商网站的订单创建功能在高并发时有约15%的失败率。

**症状：**
- 失败时用户收到"系统错误"。
- 数据库中没有生成订单。
- **但商品的库存却被扣减了！**

**核心代码 (Node.js + Sequelize)：**
```javascript
async function createOrder(orderData) {
    const transaction = await db.transaction();
    
    try {
        // 1. 验证库存
        const product = await Product.findByPk(orderData.productId, { transaction });
        if (product.stock < orderData.quantity) {
            throw new Error('库存不足');
        }
        
        // 2. 扣减库存
        await product.decrement('stock', { by: orderData.quantity, transaction });
        
        // 3. 创建订单
        const order = await Order.create({ ... }, { transaction });
        
        // 4. 调用外部支付服务 (可能很慢)
        const paymentResult = await paymentService.createPayment({ ... });
        if (!paymentResult.success) {
            throw new Error('支付创建失败');
        }
        
        await transaction.commit();
        return order;
        
    } catch (error) {
        await transaction.rollback();
        throw error;
    }
}