Đừng viết console.log() tù mù nữa: 4 cách debug JavaScript xịn sò hơn nhiều

Thú thật đi, đã bao nhiêu lần bạn mở DevTools lên và thấy một màn hình Console tràn ngập:
Plaintext

11111111111
test o day
data: [object Object]
undefined

Sau đó bạn ngồi cuộn chuột trong vô vọng chỉ để tìm xem giá trị của biến mình cần bắt nằm ở đâu.console.log() là bản năng của mọi lập trình viên khi có bug. Nhưng đối tượng console trong JavaScript không chỉ có mỗi .log(). Dưới đây là 4 phương pháp nhanh, gọn, sạch giúp bạn tiết kiệm ít nhất 15 phút mò mẫm mỗi ngày.

1. console.table() – Cứu tinh khi làm việc với Array & Object

Khi bạn gọi một danh sách user hoặc dữ liệu từ API về:
JavaScript

const users = [
  { id: 1, name: "Minh", role: "Frontend", active: true },
  { id: 2, name: "An", role: "Backend", active: false },
  { id: 3, name: "Linh", role: "Designer", active: true }
];

// Cách cũ: bấm mở từng object ra để xem
console.log(users); 

// Cách xịn:
console.table(users);

Kết quả:
DevTools sẽ render ngay một bảng kẻ ô gọn gàng với chỉ số index, các cột thuộc tính rõ ràng. Thậm chí bạn có thể click vào tiêu đề cột để sắp xếp dữ liệu trực tiếp.
Tip: Nếu object có quá nhiều trường và bạn chỉ quan tâm 1–2 trường nhất định, hãy truyền tham số thứ hai:
JavaScript

console.table(users, ["name", "role"]);

2. console.time() & console.timeEnd() – Đo hiệu năng không cần tự tính timestamp

Đừng dùng new Date() hay Date.now() trừ thủ công cho nhau để đo xem một hàm chạy mất bao lâu nữa: JavaScript

console.time(" Fetch & Process Data");

// Giả lập tác vụ tính toán hoặc gọi API
await fetchDataFromApi();

console.timeEnd(" Fetch & Process Data");

Kết quả trên console:
Plaintext

Fetch & Process Data: 142.305 ms

Chính xác tới phần nghìn mili-giây, cực kỳ tiện lợi khi bạn cần tối ưu vòng lặp nặng hoặc so sánh thời gian phản hồi giữa hai cách viết.

3. console.group() & console.groupEnd() – Gom nhóm log theo luồng nghiệp vụ

Khi một logic chạy qua nhiều bước (như quy trình checkout, validate form), việc quăng 5–6 dòng log liên tiếp sẽ làm terminal/console bị rối tung nếu có nhiều request cùng chạy:
JavaScript

function processOrder(orderId) {
  console.groupCollapsed(` Đơn hàng #${orderId}`); // Mặc định thu gọn lại
  
  console.log("1. Xác thực thông tin khách hàng: OK");
  console.log("2. Kiểm tra tồn kho kho vận: Còn 5 sản phẩm");
  console.log("3. Trạng thái thanh toán: Đã trừ thẻ");
  
  console.groupEnd();
}

processOrder("ORD-9921");

Kết quả: Toàn bộ thông tin được bọc trong một dropdown có thể đóng/mở dạng cây thư mục. Console của bạn sẽ sạch bóng và chỉ xem chi tiết khi bấm mở ra.

4. Object Shorthand – Mẹo 1 giây cho console.log truyền thống

Nếu vẫn thích thói quen gõ console.log, hãy bọc biến của bạn vào cặp ngoặc nhọn {}:
JavaScript

const userScore = 95;
const maxAttempts = 3;

// Cách nhiều người vẫn làm:
console.log("userScore:", userScore, "maxAttempts:", maxAttempts);

// Gọn hơn gấp 3 lần:
console.log({ userScore, maxAttempts });

Output:
JSON

{ userScore: 95, maxAttempts: 3 }

Bằng cách tận dụng ES6 Object Shorthand, bạn vừa in được giá trị, vừa in luôn được tên biến mà không cần gõ chuỗi mô tả thủ công.

Đừng để màn hình console biến thành bãi rác text. Hãy thử ngay một mẹo trong lần debug tiếp theo nhé!