Mệt mỏi vì mất hàng giờ truy lùng bug giao diện? Dưới đây là checklist debug đã được “thực chiến” giúp bạn tiết kiệm thời gian, bớt stress – và giữ vững… thần kinh!
🔍 Bước 1: Tái hiện lỗi ổn định
Trước khi đào bới code, hãy chắc chắn bạn kích hoạt được lỗi một cách lặp lại.
✅ Hãy luôn tự hỏi:
- Lỗi có xuất hiện ở chế độ ẩn danh (incognito) không? → loại trừ tiện ích mở rộng
- Diễn ra trên di động hay desktop?
- Chuỗi thao tác chính xác nào khiến lỗi xảy ra?
🚨 Pro Tip: Ghi lại thao tác bằng Chrome Recorder (DevTools ▶︎ More tools ▶︎ Recorder) để phát lại bước tái hiện.
🛠️ Bước 2: Khoanh vùng vấn đề
A) Console – nơi đầu tiên phải ngó
- Errors? Uncaught TypeError, Failed to load resource…
- Warnings? Lỗi hydration (React), API lỗi thời…
🚨 Pro Tip: Lọc theo “Errors” hoặc dùng console.table() cho log gọn gàng.
B) Network Tab – “sát thủ thầm lặng”
- API fail? (mã 4xx/5xx)
- Request chậm? Xem Waterfall.
- CORS? Nhiều request bị chặn.
🚨 Pro Tip: Right‑click một request → Block Request URL để kiểm tra hành vi fallback.
C) Elements & Styles
overflow: hidden? Thử bậtoverflow: visible.- Chiến tranh
z-index? Mở Layers panel. - CSS không ăn? Xem tab Computed tìm rule ghi đè.
🚨 Pro Tip: Khó debug trạng thái :hover? Dùng Force state trong DevTools.
⚡ Bước 3: Debug like a pro
A)console.log… nhưng có chiến lược
console.log({ user, currentState: store.getState() }); // Log objects clearly console.trace("How did I get here?"); // Stack trace B) Breakpoint – vũ khí bị đánh giá thấp
- Pause on DOM changes (Elements ▶︎ Break on ▶︎ Subtree modifications)
- XHR/Fetch breakpoints – dừng khi gọi API
- Conditional breakpoint – right‑click dòng code → Add conditional
🚨 Pro Tip: Chèn debugger; để đặt breakpoint tức thì.
C) Time‑travel debugging (Redux, Zustand, XState…)
- Redux DevTools: tua lại action.
- Vue/React DevTools: soi state tại bất kỳ thời điểm nào.
🔮 Bước 4: Sửa & kiểm tra
- Test trên nhiều trình duyệt (Chrome, Firefox, Safari)
- Viết/ chạy unit test (mock API fail)
- Kiểm tra regression (dùng git bisect khi cần)
🚨 Pro Tip: Dùng Local Overrides (Chrome) để thử fix ngay trong DevTools, không cần sửa file nguồn.
💡 Bonus: Công cụ debug nên có
- React Query DevTools – soi cache API
- Why Did You Render – ngăn re‑render thừa
- Lighthouse – bắt lỗi hiệu năng
🚀 Debug nhanh, ship sớm
Lần tới gặp bug, bám sát checklist này thay vì… cầu nguyện.
Bạn có mẹo debug frontend “đỉnh” nào? Chia sẻ bên dưới nhé!