Mục tiêu

Biết cách xử lý khi app bị lỗi hoặc AI làm không đúng ý — mà không cần đọc hiểu code.

Sau bài này, bạn sẽ:

• ✅ Không hoảng khi app bị lỗi — biết đây là chuyện bình thường
• ✅ Sử dụng được 3 chiến thuật sửa lỗi: Screenshot, Copy lỗi đỏ, Quên đi làm lại
• ✅ Biết cách kiểm tra app từng bước để phát hiện lỗi sớm

Nội dung chính

5.1 — Chấp nhận sự thật: AI SẼ làm sai

AI không hoàn hảo. Nó sẽ:

• Hiểu nhầm yêu cầu của bạn
• Tạo ra tính năng khác với mô tả
• Gây lỗi khi thêm tính năng mới
• Thậm chí “xóa” mất tính năng cũ khi sửa tính năng mới

Đây là bình thường. Ngay cả lập trình viên giỏi cũng phải sửa lỗi (debug) chiếm 50% thời gian làm việc. Kỹ năng sửa lỗi quan trọng ngang bằng kỹ năng tạo app.

Mẹo: Mỗi lần gặp lỗi và sửa được, bạn đang học nhanh hơn là không bao giờ gặp lỗi. Lỗi = bài học. Hãy coi đây là cơ hội để hiểu AI tốt hơn.

5.2 — Bộ 3 chiến thuật sửa lỗi không cần code

Chiến thuật 1: Screenshot + Mô tả

Đây là chiến thuật mạnh nhất và dễ nhất. Bạn không cần hiểu lỗi gì — chỉ cần chụp và mô tả.

Cách làm chi tiết:

1. Chụp ảnh màn hình phần bị lỗi (trên Windows: phím Print Screen hoặc Win + Shift + S; trên Mac: Cmd + Shift + 4)
2. Paste/upload ảnh vào chat với AI
3. Mô tả rõ: (a) bạn đang làm gì, (b) bạn expect gì, (c) thực tế xảy ra gì

Prompt mẫu — kèm screenshot:

Xem screenshot này.

Tôi đang ở trang danh sách liên hệ.
Vấn đề: Nút "Thêm vào giỏ" không hoạt động khi bấm.
Tôi expect: khi bấm nút thì sản phẩm được thêm vào danh sách
giỏ hàng phía bên phải và số lượng trong icon giỏ hàng tăng lên 1.
Thực tế: bấm nút không có gì xảy ra, không có lỗi hiện ra.

Hãy sửa lỗi này.

Prompt nâng cao — khi giao diện bị lệch:

Xem screenshot này.

Vấn đề giao diện:
- 3 card sản phẩm đang bị lệch — card thứ 3 rơi xuống hàng mới
- Trên mobile, chữ trong card bị tràn ra ngoài viền
- Nút "Mua ngay" bị đè lên phần giá

Hãy sửa:
- 3 card nằm ngang 1 hàng trên desktop, 1 cột trên mobile
- Text không được tràn — dùng text-overflow: ellipsis nếu cần
- Nút "Mua ngay" luôn ở dưới cùng card, cách phần giá 8px

Chiến thuật 2: Copy lỗi đỏ

Khi app hiển thị lỗi (thường là chữ đỏ hoặc vàng trên màn hình), hãy:

1. Copy nguyên văn dòng lỗi
2. Paste cho AI kèm mô tả hành động bạn đang làm khi lỗi xảy ra

Prompt mẫu:
"Tôi bấm nút Lưu thì app hiện lỗi này:
'TypeError: Cannot read properties of undefined (reading 'name')'
Hãy sửa lỗi này. Tôi đang ở trang thêm liên hệ mới."

Cách tìm lỗi chi tiết hơn (Console):

Đôi khi lỗi không hiện trên giao diện, nhưng ẩn trong Console:

1. Trên trình duyệt, nhấn F12 (hoặc chuột phải → “Inspect”)
2. Chọn tab Console
3. Tìm dòng chữ đỏ — đó là lỗi
4. Copy dòng lỗi đỏ đó và paste cho AI

Prompt mẫu — lỗi từ Console:
"App không hiện danh sách sản phẩm. Tôi mở Console thấy lỗi đỏ:
'Uncaught ReferenceError: products is not defined at App.jsx:42'

Hãy sửa lỗi này. App đang cần hiển thị danh sách 6 sản phẩm
dạng grid 3 cột."

Mẹo: Không cần hiểu dòng lỗi nghĩa là gì. Chỉ cần copy nguyên văn và paste cho AI. AI sẽ đọc hiểu và sửa giúp bạn. Bạn chỉ cần là “người chuyển thông điệp”.

Chiến thuật 3: “Quên đi, làm lại”

Khi AI sửa lỗi mà càng sửa càng hỏng (sửa chỗ này → hỏng chỗ kia → sửa chỗ kia → hỏng chỗ nọ), đó là lúc cần dừng lại:

┌──────────────────────────────────────────────────┐
│         KHI NÀO NÊN "QUÊN ĐI, LÀM LẠI"?        │
│                                                  │
│  ✓ AI đã sửa 3 lần mà vẫn lỗi                  │
│  ✓ Mỗi lần sửa lại phát sinh lỗi mới           │
│  ✓ App đã quá khác so với ban đầu               │
│                                                  │
│  CÁCH LÀM:                                      │
│  1. Mở conversation mới (chat mới)              │
│  2. Mô tả lại toàn bộ app từ đầu               │
│  3. Thêm dòng: "Lưu ý: tránh lỗi [mô tả lỗi]" │
│                                                  │
└──────────────────────────────────────────────────┘

Prompt mẫu “Quên đi, làm lại”:

Tạo lại app quản lý liên hệ từ đầu.

App cần có:
- Form nhập: Họ tên, SĐT, Email
- Bảng hiển thị danh sách liên hệ
- Chức năng: Thêm, Sửa, Xóa, Tìm kiếm
- Lưu dữ liệu vào localStorage
- Giao diện: nền trắng, accent xanh dương, bo tròn, shadow nhẹ
- Responsive mobile

LƯU Ý QUAN TRỌNG — tránh các lỗi sau:
- Nút Xóa phải hiện popup xác nhận trước khi xóa
- Khi sửa liên hệ, form phải đổi nút thành "Cập nhật" (không phải "Lưu")
- Tìm kiếm phải không phân biệt hoa/thường

Mẹo: Khi làm lại, hãy ghi chú lại những lỗi đã gặp ở lần trước. Đây là “kinh nghiệm” quý giá — lần sau bạn sẽ viết prompt tốt hơn ngay từ đầu.

5.3 — Bài học quan trọng nhất: Kiểm tra TỪNG bước

Sau mỗi lần AI thay đổi code, hãy kiểm tra ngay lập tức trước khi yêu cầu thêm. Giống như xây nhà — kiểm tra móng vững chắc trước rồi mới xây tường.

Checklist kiểm tra sau mỗi thay đổi:

1. ✅ App có load được không? (không bị trắng màn hình)
2. ✅ Tính năng mới hoạt động đúng không?
3. ✅ Tính năng cũ còn hoạt động không? (kiểm tra 2-3 tính năng chính)
4. ✅ Giao diện có bị lệch/vỡ không?
5. ✅ Trên mobile có hiển thị tốt không? (F12 → icon điện thoại)

Lỗi thường gặp

Vấn đề: AI sửa sai chỗ — bạn báo lỗi nút A nhưng AI lại sửa nút B. → Mô tả vị trí cụ thể hơn. Thay vì “sửa nút không hoạt động” → nói “Nút màu xanh ‘Thêm vào giỏ’ ở dưới card sản phẩm thứ nhất, phía bên trái trang — không hoạt động khi bấm.”

Vấn đề: Màn hình trắng xóa sau khi AI sửa code — không hiện gì cả. → Đây thường là lỗi JavaScript nghiêm trọng. Mở Console (F12), copy dòng lỗi đỏ đầu tiên, paste cho AI kèm: “App bị trắng màn hình sau khi sửa. Đây là lỗi trong Console: [dán lỗi]. Hãy sửa để app hiện lại bình thường.”

Vấn đề: AI nói đã sửa xong nhưng thực tế lỗi vẫn còn. → Mô tả lại lỗi cụ thể hơn, kèm các bước để tái hiện: “Lỗi vẫn còn. Để tái hiện: (1) Mở trang chính, (2) Bấm nút Thêm, (3) Nhập tên ‘Test’ và bấm Lưu → lỗi xuất hiện ở bước 3.”

Vấn đề: AI sửa được lỗi A nhưng gây ra lỗi B mới. → Gửi prompt: “Lỗi A đã sửa xong, cảm ơn. Nhưng bây giờ xuất hiện lỗi mới B: [mô tả]. Hãy sửa lỗi B mà KHÔNG ảnh hưởng đến phần đã sửa trước đó.”

Vấn đề: Không biết mô tả lỗi như thế nào — chỉ biết “nó sai sai”. → Hãy mô tả bằng so sánh: “Trước khi sửa, khi bấm nút Lưu thì danh sách hiện thêm 1 dòng. Bây giờ bấm Lưu thì không có gì xảy ra. Hãy khôi phục lại hành vi cũ.”

Bài tập thực hành

Nhiệm vụ: Cố tình tạo lỗi bằng cách yêu cầu AI thêm 1 tính năng mâu thuẫn, sau đó thực hành sửa lỗi bằng 3 chiến thuật.

Bước 1 — Tạo lỗi (⏱️ 3 phút): Yêu cầu AI một điều mâu thuẫn. Ví dụ:

• “Hiển thị danh sách vừa dọc vừa ngang cùng lúc”
• “Khi bấm nút Lưu thì vừa xóa dữ liệu vừa lưu dữ liệu”

Bước 2 — Sửa bằng Screenshot (⏱️ 5 phút): Chụp screenshot phần bị lỗi → gửi cho AI kèm mô tả expect vs reality

Bước 3 — Sửa bằng Copy lỗi đỏ (⏱️ 5 phút): Mở Console (F12) → tìm lỗi đỏ → copy paste cho AI

Bước 4 — Nếu vẫn lỗi, thử “Quên đi, làm lại” (⏱️ 7 phút): Mở chat mới → mô tả lại app + thêm dòng “Lưu ý: tránh lỗi…”

Tiêu chí thành công:

• ✅ Bạn đã thử cả 3 chiến thuật ít nhất 1 lần
• ✅ App cuối cùng hoạt động đúng, không còn lỗi
• ✅ Bạn ghi lại được quy trình: prompt gây lỗi → lỗi gì → prompt sửa → kết quả

Gợi ý nếu bị stuck:

• Nếu không biết mô tả lỗi: screenshot + “Cái này bị sai, tôi muốn nó như thế này: [mô tả]”
• Nếu Console không có lỗi đỏ: lỗi có thể là lỗi logic (không phải lỗi code) — dùng Chiến thuật 1

Thời gian: 20 phút Deliverable: Ghi lại quá trình sửa lỗi: prompt gây lỗi → lỗi gì → prompt sửa lỗi → kết quả

Tổng kết bài 5

Bạn đã học được	Chi tiết
AI sẽ sai	Bình thường, lập trình viên cũng vậy
3 chiến thuật sửa lỗi	Screenshot, Copy lỗi đỏ, Quên đi làm lại
Kiểm tra từng bước	Test ngay sau mỗi thay đổi