Gỡ lỗi code do AI tạo

Mọi thứ sẽ gặp lỗi. Đó không phải là lỗi của vibe coding — đó là một phần bình thường của việc xây dựng phần mềm. Sự khác biệt giữa người bỏ cuộc và người hoàn thành sản phẩm là biết cách sửa chữa nhanh chóng.

Bài học này dạy một phương pháp có hệ thống để gỡ lỗi code do AI tạo ra, ngay cả khi bạn không hoàn toàn hiểu code đó.

🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã xây dựng một ứng dụng hoàn chỉnh từng bước, cam kết sau mỗi tính năng. Những cam kết đó sẽ trở thành lưới an toàn của bạn trong bài học này — bạn luôn có thể quay lại trạng thái hoạt động.

Tư duy gỡ lỗi

Khi có lỗi xảy ra, hãy chống lại hai thôi thúc:

1. Đừng hoảng sợ và bắt đầu lại từ đầu. Vấn đề thường chỉ là một chi tiết nhỏ.
2. Đừng dán "sửa lỗi" mà không có ngữ cảnh. Bạn sẽ chỉ nhận được một phỏng đoán, chứ không phải là một giải pháp.

Thay vào đó: đọc lỗi, hiểu điều gì đã xảy ra và cung cấp thông tin cụ thể cho AI.

Bước 1: Đọc lỗi

Hầu hết các lỗi đều cho bạn biết chính xác điều gì sai. Bạn chỉ cần tìm ra chúng.

Lỗi trong bảng điều khiển trình duyệt

Mở công cụ dành cho nhà phát triển của trình duyệt (nhấn F12 hoặc nhấp chuột phải → Kiểm tra → Bảng điều khiển):

Cách chia sẻ lỗi với AI

Mô tả kém:

Ứng dụng của tôi bị lỗi

Mô tả tốt:

Khi tôi nhấp vào nút 'Add Bookmark', bảng điều khiển trình duyệt hiển thị: TypeError: Cannot read property 'map' of undefined ở dòng 42 trong BookmarkGrid.jsx. Lỗi bắt đầu sau khi tôi thêm tính năng lọc tag.

Bao gồm: hành động nào gây ra lỗi, thông báo lỗi chính xác, file và dòng nào, và thay đổi nào gây ra lỗi.

✅ Kiểm tra nhanh: Bảng điều khiển trình duyệt hiển thị ReferenceError: tags is not defined ở dòng 15. Không cần xem code, vấn đề có thể là gì?

Đáp án: Dòng 15 sử dụng một biến có tên là tags mà chưa từng được tạo hoặc nhập. AI có thể đã tham chiếu đến một biến từ một file khác mà không nhập nó, hoặc đã đổi tên nó trong quá trình tái cấu trúc. Cách khắc phục là tìm xem tags nên đến từ đâu và nhập hoặc định nghĩa nó.

Bước 2: Chiến lược hoàn tác

Nếu bạn đã thực hiện commit sau mỗi tính năng (như đã học trong bài học trước), bạn sẽ có các checkpoint:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

Commit 1: Bố cục ✓ (đang hoạt động)
Commit 2: Thêm bookmark ✓ (đang hoạt động)
Commit 3: Lọc tag ✓ (đang hoạt động)
Commit 4: Tìm kiếm ✗ (đã làm hỏng một số thứ)

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả đầu ra mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa trên prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải là câu trả lời cuối cùng.

📌 Nên làm gì với kết quả đầu ra: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm tất cả mọi thứ cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung này: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ những lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

Quay lại Commit 3. Bố cục, bookmark và tag của bạn vẫn hoạt động. Bây giờ hãy thử lại tính năng tìm kiếm với một cách tiếp cận mới.

Trong trình soạn thảo code (Cursor/Claude Code):

git log --oneline        # xem các commit của bạn
git checkout [commit]    # quay lại trạng thái hoạt động

Trong Lovable/Bolt.new: Sử dụng lịch sử phiên bản tích hợp để khôi phục phiên bản hoạt động trước đó.

Nguyên tắc chung: Nếu bạn đã dành 15 phút để gỡ lỗi và tình hình ngày càng tệ hơn, hãy quay lại. Làm lại một tính năng từ trạng thái hoạt động sẽ nhanh hơn là gỡ rối các lỗi dây chuyền.

Bước 3: Khắc phục bằng cuộc hội thoại mới

Khi AI liên tục làm mọi thứ tồi tệ hơn, vấn đề thường là do sự nhầm lẫn ngữ cảnh:

1. AI đã mắc lỗi trong tin nhắn số 5
2. Các tin nhắn từ 6 đến 10 đề cập đến lỗi như thể nó đúng
3. Mỗi lần "sửa lỗi" đều được xây dựng trên nền tảng đã bị hỏng

Giải pháp: Bắt đầu một cuộc hội thoại hoàn toàn mới. Bao gồm:

Tôi đang xây dựng một trình quản lý bookmark với [công nghệ].
Đây là code hiện tại của tôi: [dán file liên quan hoặc mô tả trạng thái]
Tôi cần thêm chức năng tìm kiếm.
Lần thử trước đã làm hỏng tính năng lọc tag. Đây là lỗi tôi nhận được:
[dán lỗi]
Vui lòng triển khai chức năng tìm kiếm MÀ KHÔNG sửa đổi logic lọc tag.

Ngữ cảnh mới có nghĩa là AI không mang theo bất kỳ sự nhầm lẫn nào trước đó.

✅ Kiểm tra nhanh: Bạn đã gỡ lỗi trong cùng một cuộc hội thoại với AI trong 20 tin nhắn. Mỗi lần sửa lỗi lại tạo ra một vấn đề mới. Bạn nên làm gì?

Câu trả lời: Dừng lại. Bắt đầu một cuộc trò chuyện mới. Cuộc trò chuyện hiện tại đã bị "độc hại" — AI đang xây dựng dựa trên một chuỗi lỗi. Quay lại bản cập nhật hoạt động gần nhất, bắt đầu một cuộc trò chuyện mới và mô tả tính năng bạn muốn chỉ với ngữ cảnh liên quan.

Các lỗi Vibe Coding thường gặp

Template prompt gỡ lỗi

Khi yêu cầu AI sửa lỗi, hãy sử dụng cấu trúc sau:

BÁO CÁO LỖI:
Điều tôi mong đợi: [mô tả hành vi mong muốn]
Điều thực tế xảy ra: [mô tả hành vi thực tế]
Thông báo lỗi: [dán lỗi chính xác từ bảng điều khiển]
File và dòng: [nếu hiển thị trong lỗi]
Thời điểm bắt đầu: [thay đổi nào gây ra lỗi]

QUAN TRỌNG: Chỉ sửa đổi code cần thiết để khắc phục lỗi này.
Không được tái cấu trúc hoặc thay đổi code không liên quan.

Dòng cuối cùng rất quan trọng — nếu không có nó, AI có thể "tự động" tái cấu trúc code đang hoạt động trong khi sửa lỗi, tạo ra các vấn đề mới.

Khi nào cần yêu cầu trợ giúp

Nếu bạn đã thử:

1. Đọc lỗi
2. Hoàn tác
3. Trao đổi mới với ngữ cảnh cụ thể
4. Lỗi vẫn còn tồn tại

Đó có thể là vấn đề phức tạp thực sự. Các lựa chọn:

• Tìm kiếm thông báo lỗi trực tuyến (có thể ai đó đã gặp phải)
• Hỏi trong diễn đàn cộng đồng (r/webdev, máy chủ Discord, Stack Overflow)
• Cân nhắc xem tính năng đó có cần một cách tiếp cận kỹ thuật khác hay không

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

1. Xây dựng một ứng dụng đếm đơn giản (nút tăng số)
2. Yêu cầu AI thêm nút "reset" — nhưng cố tình đưa ra yêu cầu mơ hồ
3. Khi nó tạo ra thứ gì đó không mong đợi, hãy thực hành chu trình gỡ lỗi: đọc lỗi → mô tả lỗi → sửa lỗi
4. Thử làm hỏng ứng dụng bằng cách yêu cầu một tính năng xung đột, sau đó thực hành hoàn tác
5. Bắt đầu một cuộc hội thoại mới và khắc phục sự cố một cách gọn gàng

Những điểm chính cần ghi nhớ

• Luôn đọc thông báo lỗi thực tế trước khi yêu cầu AI sửa lỗi
• Bao gồm ngữ cảnh cụ thể: những gì bạn mong đợi, những gì đã xảy ra, lỗi và thay đổi nào gây ra lỗi
• Hoàn tác về bản commit hoạt động gần nhất của bạn sau 15 phút gỡ lỗi không thành công
• Bắt đầu các cuộc hội thoại mới khi ngữ cảnh bị sai lệch (nhiều lần sửa lỗi không thành công)
• Kết thúc mỗi yêu cầu sửa lỗi bằng "Chỉ sửa đổi những gì cần thiết cho bản sửa lỗi này — đừng thay đổi code không liên quan"
• Bảng điều khiển trình duyệt và hệ thống kiểm soát phiên bản là hai công cụ chính của bạn các công cụ gỡ lỗi quan trọng nhất