Debugging & DevTools: tìm lỗi code như thám tử

Console: vũ khí cơ bản

console.log() là cách debug nhanh nhất nhưng không phải duy nhất. Console còn có nhiều công cụ hữu ích khác:

// File: console.js
// console.log — in giá trị ra
console.log("user:", user)

// console.table — in object/array dạng bảng, dễ đọc hơn
console.table([{ name: "An", age: 25 }, { name: "Bình", age: 30 }])

// console.warn — cảnh báo (màu vàng)
console.warn("Dữ liệu cũ, nên refresh")

// console.error — lỗi (màu đỏ)
console.error("Không kết nối được server")

// console.time — đo thời gian chạy
console.time("sort")
arr.sort()
console.timeEnd("sort") // sort: 2.34ms

// console.group — nhóm log cho dễ đọc
console.group("User data")
console.log("Name:", user.name)
console.log("Email:", user.email)
console.groupEnd()

Breakpoint: dừng code tại bất kỳ dòng nào

Breakpoint cho phép bạn dừng code giữa chừng, xem giá trị tất cả biến tại thời điểm đó, rồi chạy từng dòng một. Mạnh hơn console.log rất nhiều vì bạn thấy TOÀN BỘ trạng thái.

// File: breakpoint.js
// Cách 1: thêm debugger vào code
function calculateTotal(items) {
  let total = 0
  for (const item of items) {
    debugger // ← Trình duyệt sẽ DỪNG ở đây
    total += item.price * item.quantity
  }
  return total
}

// Cách 2: mở DevTools (F12) → Sources → click số dòng
// → Chấm xanh xuất hiện = breakpoint đã đặt
// → Refresh trang → code dừng tại breakpoint

// Các nút điều khiển:
// ▶ Resume: chạy tiếp đến breakpoint kế
// ⤵ Step Over: chạy dòng tiếp theo (không vào trong hàm)
// ⤴ Step Into: chạy vào BÊN TRONG hàm được gọi
// ⤶ Step Out: chạy ra khỏi hàm hiện tại

DevTools tabs quan trọng

Đọc Error Message đúng cách

// File: error.js
// Lỗi mẫu:
// TypeError: Cannot read properties of undefined (reading "name")
//     at getUserName (app.js:15:22)
//     at handleClick (app.js:8:10)

// Cách đọc:
// 1. Loại lỗi: TypeError — sai kiểu dữ liệu
// 2. Chi tiết: đọc "name" trên undefined → biến nào đó là undefined
// 3. Vị trí: app.js dòng 15, cột 22 → mở file, đến dòng 15
// 4. Call stack: handleClick gọi getUserName → lỗi ở getUserName

// Sai: đọc lỗi rồi Google nguyên câu
// Đúng: hiểu lỗi, kiểm tra biến tại dòng 15 xem vì sao undefined

• Dùng console.table, console.time ngoài console.log
• Đặt breakpoint và debug từng dòng
• Biết 5 tab chính trong DevTools
• Đọc error message: loại lỗi + dòng code + call stack