Vứt Bỏ Thói Quen "console.log" Mọi Thứ: Bí Kíp Debug Chuẩn Vibe Coder
Có bao giờ bạn rơi vào tình cảnh này chưa: Đang hì hục debug một cái bug cực khoai, bạn chèn hàng chục dòng console.log("vao day 1"), console.log("vao day 2"), console.log("data ne", data). Đến lúc mở màn hình console lên, một mớ hỗn độn trôi tuột qua màn hình. Tệ hơn nữa là quả log đi vào lòng đất: data ne [object Object].
Cái "vibe" code của bạn tụt dốc không phanh.
Thực ra, object console trong JavaScript mang trong mình một kho vũ khí mạnh mẽ hơn log rất nhiều. Hôm nay, chúng ta sẽ cùng điểm mặt chỉ tên toàn bộ bộ sậu nhà console. để xem làm thế nào một Vibe Coder "vẽ" ra những log xịn sò nhất nhé.
1. Nhóm "Báo Cáo Cơ Bản": Trực quan hóa mức độ ưu tiên
Đừng dùng log cho mọi thứ. Hãy để màu sắc làm việc cho bạn, giúp mắt phân loại thông tin trong tích tắc.
console.log(): Dùng cho các thông điệp bình thường.console.info(): Giống log, nhưng mang ý nghĩa cung cấp thông tin luồng chạy (trên một số trình duyệt có thêm icon chữ "i").console.warn(): Dùng khi có thứ gì đó không ổn nhưng chưa đến mức sập hệ thống (Vd: API sắp bị deprecated). Cảnh báo chữ màu vàng cực kỳ dễ chú ý.console.error(): In ra chữ màu đỏ chót kèm theo Stack Trace. Dùng trong khối catch để highlight lỗi nghiêm trọng.
console.info("Worker started at port 3000");
console.warn("Missing avatar URL, using default fallback");
console.error("Database connection failed!");
2. Nhóm "Thẩm Mỹ Viện": Debug Data Structure siêu mượt
Đây là nhóm phân biệt ranh giới giữa dev thường và Vibe Coder.
console.table()- Trùm cuối hiển thị: Thay vì log ra một array chứa hàng chục object rối rắm, hàm này biến mọi thứ thành một bảng tính cực kỳ ngăn nắp. Bạn sẽ thấy rõ từng field, từng value.
const users = [
{ id: 1, name: "Hiếu", role: "Admin" },
{ id: 2, name: "Hoàng", role: "User" }
];
console.table(users);
console.dir()- Soi nội tạng Object/DOM:
Khi bạn console.log một element HTML, nó sẽ in ra cấu trúc HTML. Nhưng nếu dùng console.dir(), nó sẽ in ra dưới dạng một JavaScript Object chứa đầy đủ các properties ẩn bên trong. Rất hữu ích khi làm việc với DOM hoặc object lồng nhau quá sâu.
3. Nhóm "Kế Toán": Đếm và Đo lường hiệu năng
Đừng hì hục tạo biến let count = 0 hay Date.now() để đo tốc độ nữa.
console.time(label)&console.timeEnd(label): Vũ khí lợi hại để test performance. Khai báo một nhãn (label), chạy code, rồi end nó.
console.time("FetchData");
await fetch('https://api.example.com/users');
console.timeEnd("FetchData");
// Output: FetchData: 235.12ms
console.count(label)&console.countReset(label): Muốn biết một component React bị re-render bao nhiêu lần? Hoặc vòng lặp này chạy qua bao nhiêu bận?
for (let i = 0; i < 3; i++) {
console.count("Vòng lặp chạy");
}
// Output:
// Vòng lặp chạy: 1
// Vòng lặp chạy: 2
// Vòng lặp chạy: 3
4. Nhóm "Quy Hoạch": Tổ chức Terminal gọn gàng
Nếu bạn có một luồng logic dài dòng và sinh ra nhiều log, hãy gom chúng lại.
console.group(label)/console.groupCollapsed(label)&console.groupEnd(): Tạo ra các khối log có thể đóng/mở (thụt lề).groupCollapsedsẽ mặc định đóng khối log lại để đỡ rác màn hình.
console.group("Quy trình Thanh Toán");
console.log("1. Check số dư");
console.log("2. Trừ tiền");
console.log("3. Gửi email");
console.groupEnd();
5. Nhóm "Thám Tử": Truy tìm dấu vết
console.trace():Hàm này thần thánh ở chỗ: Nó không chỉ in ra chữ, mà còn in ra đường dẫn gốc rễ (Call Stack) xem hàm này được gọi từ đâu, qua những file nào mới chạy đến đây. Cực đỉnh để debug các dự án lằng nhằng nhiều callback.console.assert(condition, message): Chỉ in ra log khi điều kiện bị SAI. Một cách viết test rút gọn ngay trong lúc dev.
const isAdult = age >= 18;
console.assert(isAdult, "Cảnh báo: User này chưa đủ 18 tuổi!");
console.clear(): Quét sạch mọi dấu vết trên màn hình console, trả lại một tâm hồn thanh tịnh để bắt đầu debug một luồng mới.
Lời kết
Trạng thái "Flow" của một Vibe Coder đến từ việc kiểm soát tốt mọi công cụ trong tay. Biết cách log đúng lúc, đúng chỗ, đúng format không chỉ giúp bạn tìm bug nhanh gấp đôi, mà còn khiến người anh em review code hoặc fix bug chung với bạn phải trầm trồ vì sự chuyên nghiệp. Lần tới, trước khi gõ console.log(), hãy dừng 1 giây và xem mình có thể dùng hàm nào "ngon" hơn không nhé!
Chủ đề tiếp theo: Cơn Ác Mộng Memory Leak trong Node.js & Sự Thật Về Garbage Collector
Hôm nay chúng ta đã bàn về công cụ debug, vậy hãy thử tưởng tượng bạn nhận một dự án Backend Node.js. Chạy trên Local cực mượt, nhưng lên Production, cứ cách 3 ngày là RAM server từ 1GB tăng từ từ lên 4GB rồi... chết lâm sàng. console.time hay console.table lúc này cũng vô dụng!
Ở bài viết tới, mình sẽ dắt anh em đi săn một con quái vật đáng sợ bậc nhất trong lập trình: Memory Leak (Rò rỉ bộ nhớ). Cùng tìm hiểu xem Javascript dọn dẹp rác (Garbage Collector) thế nào, và những đoạn code "trông có vẻ vô hại" lại đang âm thầm nuốt trọn RAM server ra sao. Nhớ đón đọc nhé!
All rights reserved
