steeb-task-debugger

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

STEEB Task Debugger

STEEB 任务调试工具

This skill helps debug and resolve issues with task management in the STEEB application.

此技能可帮助调试和解决STEEB应用中的任务管理问题。

When to Use This Skill

何时使用此技能

Use this skill when encountering:

Tasks not completing correctly
Task state inconsistencies between components
Firestore synchronization errors
Tasks disappearing or duplicating
UI not reflecting task changes
Performance issues with task operations

当遇到以下问题时使用此技能：

任务无法正确完成
组件间任务状态不一致
Firestore同步错误
任务消失或重复
UI未反映任务变更
任务操作的性能问题

Debugging Workflow

调试流程

Step 1: Identify the Issue Type

步骤1：确定问题类型

First, determine the type of task issue:

Task Creation Issues:

Check if
```
addTask
```
function is being called correctly
Verify task data structure matches expected
```
Task
```
interface
Check for duplicate task IDs or missing required fields

Task Completion/Toggle Issues:

Verify
```
toggleTask
```
is called with correct task ID
Check if optimistic updates are working
Verify Firestore synchronization (if enabled)

Task Deletion Issues:

Confirm task exists before deletion attempt
Check if
```
deleteTask
```
function removes from local state
Verify UI re-renders after deletion

State Management Issues:

Check if tasks are properly synchronized between components
Verify Zustand store updates trigger re-renders
Check for stale state or race conditions

首先，确定任务问题的类型：

任务创建问题：

检查
```
addTask
```
函数是否被正确调用
验证任务数据结构是否符合预期的
```
Task
```
接口
检查是否存在重复任务ID或缺失必填字段

任务完成/切换问题：

验证
```
toggleTask
```
是否使用正确的任务ID调用
检查乐观更新是否正常工作
验证Firestore同步（若已启用）

任务删除问题：

在尝试删除前确认任务是否存在
检查
```
deleteTask
```
函数是否从本地状态中移除任务
验证删除后UI是否重新渲染

状态管理问题：

检查任务是否在组件间正确同步
验证Zustand存储更新是否触发重新渲染
检查是否存在过期状态或竞态条件

Step 2: Run Diagnostic Commands

步骤2：运行诊断命令

Execute these commands to diagnose the problem:

bash

undefined

执行以下命令来诊断问题：

bash

undefined

Check current task state in console

console.log('Current tasks:', useTaskStore.getState().tasks);

Check specific task properties

const task = useTaskStore.getState().tasks.find(t => t.id === 'task-id'); console.log('Task details:', task);

Check store state

console.log('Store state:', useTaskStore.getState());

undefined

console.log('Store state:', useTaskStore.getState());

undefined

Step 3: Verify Store Functions

步骤3：验证存储函数

Test the core task management functions:

javascript

// Test task creation
const testTask = {
  title: 'Debug test task',
  completed: false,
  status: 'pending',
  createdAt: new Date().toISOString()
};
await useTaskStore.getState().addTask(testTask);

// Test task toggle
const taskId = 'existing-task-id';
await useTaskStore.getState().toggleTask(taskId);

// Test task deletion
await useTaskStore.getState().deleteTask(taskId);

测试核心任务管理函数：

javascript

// Test task creation
const testTask = {
  title: 'Debug test task',
  completed: false,
  status: 'pending',
  createdAt: new Date().toISOString()
};
await useTaskStore.getState().addTask(testTask);

// Test task toggle
const taskId = 'existing-task-id';
await useTaskStore.getState().toggleTask(taskId);

// Test task deletion
await useTaskStore.getState().deleteTask(taskId);

Step 4: Check Component Integration

步骤4：检查组件集成

Verify components are using the store correctly:

SteebChatAI Component:

Ensure
```
toggleTask
```
and
```
deleteTask
```
are properly imported
Check if button onClick handlers prevent multiple clicks
Verify error handling in async operations

Dashboard Component:

Ensure tasks are filtered correctly (pending vs completed)
Check if
```
useTaskStore
```
updates trigger re-renders
Verify statistics calculations are accurate

验证组件是否正确使用存储：

SteebChatAI组件：

确保
```
toggleTask
```
和
```
deleteTask
```
已正确导入
检查按钮的onClick处理程序是否防止多次点击
验证异步操作中的错误处理

Dashboard组件：

确保任务被正确过滤（待办与已完成）
检查
```
useTaskStore
```
更新是否触发重新渲染
验证统计计算是否准确

Step 5: Common Solutions

步骤5：常见解决方案

Multiple Click Issues:

javascript

// Add this pattern to prevent multiple clicks
const [isProcessing, setIsProcessing] = useState(false);

const handleTaskAction = async (taskId) => {
  if (isProcessing) return;

  setIsProcessing(true);
  try {
    await toggleTask(taskId);
  } catch (error) {
    console.error('Task action failed:', error);
  } finally {
    setIsProcessing(false);
  }
};

State Not Updating:

javascript

// Force re-render after store update
setForceUpdate(prev => prev + 1);
// Or use proper React state management
const { tasks, toggleTask } = useTaskStore();

Firebase Errors:

javascript

// Handle Firestore errors gracefully
try {
  await FirestoreTaskService.updateTask(id, updates);
} catch (error) {
  console.warn('Firestore sync failed, local changes kept:', error);
  // Continue with local state only
}

多次点击问题：

javascript

// Add this pattern to prevent multiple clicks
const [isProcessing, setIsProcessing] = useState(false);

const handleTaskAction = async (taskId) => {
  if (isProcessing) return;

  setIsProcessing(true);
  try {
    await toggleTask(taskId);
  } catch (error) {
    console.error('Task action failed:', error);
  } finally {
    setIsProcessing(false);
  }
};

状态未更新：

javascript

// Force re-render after store update
setForceUpdate(prev => prev + 1);
// Or use proper React state management
const { tasks, toggleTask } = useTaskStore();

Firebase错误：

javascript

// Handle Firestore errors gracefully
try {
  await FirestoreTaskService.updateTask(id, updates);
} catch (error) {
  console.warn('Firestore sync failed, local changes kept:', error);
  // Continue with local state only
}

Step 6: Performance Optimization

步骤6：性能优化

For large task lists:

Implement virtual scrolling
Add pagination or lazy loading
Use React.memo for task components
Debounce search/filter operations

针对大型任务列表：

实现虚拟滚动
添加分页或懒加载
对任务组件使用React.memo
对搜索/过滤操作添加防抖

Scripts

脚本

The following scripts are available for automated debugging:

以下脚本可用于自动化调试：

Quick Task Validation

快速任务验证

bash

undefined

bash

undefined

Run quick task validation

python .claude/skills/steeb-task-debugger/scripts/quick_validate.py

undefined

python .claude/skills/steeb-task-debugger/scripts/quick_validate.py

undefined

Task State Analyzer

任务状态分析器

bash

undefined

bash

undefined

Analyze task state consistency

python .claude/skills/steeb-task-debugger/scripts/analyze_task_state.py

undefined

python .claude/skills/steeb-task-debugger/scripts/analyze_task_state.py

undefined

References

参考资料

Task interface definition in
```
src/types/index.ts
```
Task store implementation in
```
src/store/useTaskStore.ts
```
Firestore service in
```
src/services/firestoreTaskService.ts
```
Task components in
```
src/components/Task*.tsx
```

```
src/types/index.ts
```
中的Task接口定义
```
src/store/useTaskStore.ts
```
中的任务存储实现
```
src/services/firestoreTaskService.ts
```
中的Firestore服务
```
src/components/Task*.tsx
```
中的任务组件

Assets

资源

Debug checklist template for common issues
Task state flow diagram
Performance profiling guidelines

常见问题的调试检查清单模板
任务状态流程图
性能分析指南