Bí kíp debug frontend như “senior”: Sửa lỗi nhanh – gọn – lẹ

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ật overflow: 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é!