LẬP TRÌNH

Gỡ lỗi ứng dụng web đơn
trang phía frontend

Đưa mô tả lỗi, framework và log console, nhận về nguyên nhân gốc cùng các bước sửa theo thứ tự.

Dùng để: Tìm ra nguyên nhân gốc của một lỗi hiển thị hoặc tương tác trong ứng dụng web đơn trang và cách sửa.

Nội dung prompt

VAI TRÒ
Bạn là kỹ sư frontend cấp cao, chuyên gỡ lỗi ứng dụng web đơn trang chạy ở phía trình duyệt.

NHIỆM VỤ
Tìm nguyên nhân gốc và cách sửa sự cố ở ĐẦU VÀO, chỉ tập trung vào phần chạy trên trình duyệt.

ĐẦU VÀO
- Mô tả sự cố: [VÍ DỤ BẤM NÚT NHƯNG KHÔNG PHẢN HỒI]
- Framework và phiên bản: [VÍ DỤ REACT 18 DÙNG VITE]
- Nơi triển khai: [VÍ DỤ VERCEL, NETLIFY]
- Lỗi và log console: [DÁN LỖI HOẶC MÔ TẢ]
- Đoạn mã liên quan: [DÁN MÃ]
- Việc đã thử: [MÔ TẢ NGẮN]

QUY TẮC
1. Không giả định rằng backend hay API luôn sẵn sàng.
2. Nêu các nguyên nhân khả năng cao nhất trước, mỗi nguyên nhân kèm lý do.
3. Giải thích vì sao lỗi xảy ra bằng ngôn ngữ dễ hiểu, tránh thuật ngữ rối.
4. Đưa cách sửa theo từng bước, chỉ rõ chỗ cần sửa trong mã.
5. Không viết lại toàn bộ ứng dụng, chỉ sửa phần liên quan.
6. Đề xuất cách phòng lỗi tương tự cho lần sau.

KHUÔN ĐẦU RA
- Phân tích ngắn
- Danh sách nguyên nhân gốc kèm lý do
- Các bước sửa cụ thể
- Mẹo phòng tránh

Thay nội dung trong dấu [ ] trước khi sử dụng.

Mẹo tinh chỉnh

Lỗi ở ứng dụng đơn trang thường đến từ trạng thái, vòng đời component hoặc đường dẫn tài nguyên, nên hãy mô tả thật rõ lúc lỗi xảy ra. Nếu lỗi chỉ có trên môi trường đã triển khai mà máy bạn chạy bình thường, hãy ghi rõ điều đó. Với lỗi khó, yêu cầu thêm cách ghi log tạm để tự tìm điểm sai.

Prompt khác cùng nhóm

Dựng ứng dụng trắc nghiệm tương tác bằng JavaScriptCho ngân hàng câu hỏi và thiết lập, nhận về app trắc nghiệm: nhiều dạng câu, đếm ngược, chấm điểm, xem lại bài và bảng điểm cao.Xem promptDựng ứng dụng quản lý thu chi cá nhânMô tả nhu cầu tài chính, nhận về app quản lý thu chi: bảng điều khiển, phân loại giao dịch, biểu đồ, mục tiêu ngân sách và sao lưu.Xem promptDựng ứng dụng web tạo hóa đơn PDF bằng Node.jsMô tả nguồn đơn hàng và quy tắc hoa hồng, nhận về kiến trúc ứng dụng Node.js xuất hai tệp PDF: bảng chi tiết và hóa đơn.Xem promptDựng ứng dụng ghi chú Markdown hai màn hìnhMô tả nhu cầu ghi chú, nhận về app hai khung soạn và xem trước, hỗ trợ bảng, khối mã, công thức và lưu trong trình duyệt.Xem promptDựng Telegram Mini App điểm danh ca làm việcMô tả ca làm và vai trò, nhận về mini app: chấm công vào ra, xác thực người dùng, xem lịch ca và trang quản trị xếp ca.Xem promptLập quy trình xử lý lỗ hổng bảo mật CVEĐưa danh sách lỗ hổng và hệ thống đang dùng, nhận về quy trình phân tích nguyên nhân, chọn mức ưu tiên và tài liệu tuân thủ.Xem promptĐóng vai kỹ sư phần mềm nhúng ô tô theo chuẩn AUTOSARĐưa bối cảnh vi điều khiển và yêu cầu, nhận về cách chia lớp phần mềm, danh sách mô-đun và điểm kiểm tra an toàn.Xem promptTạo mẫu giao diện ứng dụng trò chuyện AI cho AndroidMô tả tính năng và địa chỉ API, nhận về bản mẫu giao diện tối gồm bốn màn hình và luồng điều hướng bằng thanh cạnh trái.Xem promptDựng game đua xe 3D bằng Three.jsMô tả đường đua và chế độ chơi, nhận về game đua xe: mô phỏng vật lý, đối thủ AI, HUD đầy đủ, hiệu ứng khói và thời tiết.Xem prompt