Các công cụ Vibe Code

Debugging Mới: Không Cần Hiểu Code Để Fix Code

Debugging truyền thống yêu cầu bạn đọc hiểu code, trace execution, và tìm root cause. Vibe Debugging approach khác: bạn mô tả problem, AI tìm và fix.

The 3-Step Vibe Debugging Process

┌─────────────────────────────────────────┐
│  Step 1: CAPTURE                        │
│  Thu thập tất cả thông tin về lỗi       │
├─────────────────────────────────────────┤
│  Step 2: COMMUNICATE                    │
│  Mô tả problem cho AI một cách rõ ràng  │
├─────────────────────────────────────────┤
│  Step 3: CORRECT                        │
│  Verify fix và học từ solution          │
└─────────────────────────────────────────┘

Step 1: CAPTURE - Thu Thập Evidence

Những gì cần thu thập:

1. Error Message (Copy đầy đủ):

TypeError: Cannot read properties of undefined 
(reading 'map')
    at ProductList (./src/components/ProductList.tsx:15:23)

2. Expected vs Actual Behavior:

Expected: Hiển thị danh sách 10 products
Actual: Trang trắng, console báo lỗi trên

3. Steps to Reproduce:

1. Login với account test
2. Navigate to /products
3. Lỗi xuất hiện ngay khi page load

4. Context Information:

- Chạy trong development mode
- Lần cuối hoạt động: trước khi fetch data từ API mới
- Recent changes: Thêm filter feature

Step 2: COMMUNICATE - Prompt Template

The Bug Report Prompt:

🐛 BUG REPORT

**Error:**
[Paste full error message]

**File:** @file src/components/ProductList.tsx

**Expected:** [What should happen]

**Actual:** [What is happening]

**Reproduce:**
1. [Step 1]
2. [Step 2]

**Recent changes:** [What was modified recently]

Analyze the error và đề xuất fix.
Giải thích nguyên nhân trước khi sửa.

Step 3: CORRECT - Verify & Learn

Sau khi nhận solution:

1. Đọc explanation trước:

   • AI giải thích tại sao lỗi xảy ra?
   • Logic có hợp lý không?

2. Review code change:

   • Change có minimal và focused không?
   • Có side effects không?

3. Test thoroughly:

   • Fix đúng bug chưa?
   • Có tạo bug mới không?
   • Test edge cases

4. Document learning:

   # Lessons Learned
   - Always check if data exists before .map()
   - API có thể return undefined, handle gracefully
   

Common Debug Scenarios & Templates

Scenario 1: UI Not Rendering

Component [name] không render.
Console không có lỗi.
@file [component file]
Check: conditional rendering, data fetching, state updates

Scenario 2: API Error

API route trả về 500 error.
@file [api route]
Request body: [sample]
Check: validation, database query, error handling

Scenario 3: Type Error

TypeScript error: [paste error]
@file [file with error]
Suggest fix mà không dùng "any" type

Scenario 4: Styling Issues

Component [name] styling bị lệch trên mobile.
@file [component file]
Expected: [describe layout]
Actual: [describe issue]
Check responsive breakpoints và flex/grid layout

Pro Tips Cho Effective Debugging

🔥 Golden Rule: Never blindly accept AI fixes. Always understand WHY the fix works.

Bài Tập

Intentionally tạo một bug (undefined.map()) và practice 3-step process để debug nó với AI.