Console và DevTools JavaScript: debug hơn cả console.log

Console không chỉ có log

console.log là công cụ debug đầu tiên mà hầu hết mọi người học, và cũng là công cụ mà nhiều người không bao giờ bỏ. Nó vẫn dùng được, nhưng đối tượng console còn có hàng chục phương thức khác giúp debug nhanh và rõ ràng hơn. Và khi đã quen với chính DevTools (breakpoint, call stack, watch expression), bạn sẽ ít cần đến log hơn trước.

Bắt đầu bằng một lượt xem nhanh:

console.log("standard message");
console.info("informational");
console.warn("something looks off");
console.error("something broke");

Cả bốn đều in ra cùng một console, nhưng trình duyệt hiển thị chúng khác nhau: cảnh báo có nền vàng, lỗi có màu đỏ kèm biểu tượng, và cả hai đều kèm stack trace. Bộ lọc trong DevTools cho phép ẩn hoặc chỉ xem từng mức, rất cần thiết khi ứng dụng sinh ra hàng trăm thông điệp.

In nhiều giá trị theo cách lười

Khi muốn xem nhiều biến cùng lúc, đừng nối chúng thành một chuỗi. Hãy truyền chúng thành các đối số riêng, hoặc tốt hơn nữa, gói chúng vào một đối tượng để mỗi giá trị đều có nhãn:

const user = { name: "Rosa", age: 30 };
const count = 3;

// Hard to read - which value is which?
console.log(user.name + " " + user.age + " " + count);

// Better - each value is labeled and kept as its real type.
console.log({ user, count });

Mẹo { user, count } dùng cú pháp viết tắt của đối tượng: tên biến trở thành khóa. Trong console bạn sẽ thấy { user: {...}, count: 3 } và có thể mở rộng user để xem chi tiết. Bạn không làm mất cấu trúc của đối tượng như khi chuyển nó thành chuỗi.

console.table cho mảng các đối tượng

Khi nhìn vào một mảng các đối tượng, console.log chỉ cho bạn một mớ thu gọn khó đọc. console.table hiển thị nó thành một bảng thật sự:

const users = [
    { name: "Ada", age: 36, role: "admin" },
    { name: "Boris", age: 28, role: "user" },
    { name: "Chen", age: 42, role: "user" },
];

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

Trong console của trình duyệt, lần gọi đầu tiên in ra cả ba hàng với các cột có thể sắp xếp. Lần gọi thứ hai chỉ giữ lại name và role. Đây là một nâng cấp rất đáng giá cho mọi thứ có dạng dữ liệu: response từ API, kết quả truy vấn, tệp CSV đã phân tích.

console.dir và console.log

Trông thì giống nhau, nhưng chúng xử lý phần tử DOM khác nhau:

const el = document.querySelector("button");

console.log(el);   // prints the HTML: <button>Click me</button>
console.dir(el);   // prints the JS object view with all properties

log định dạng phần tử dưới dạng HTML. dir cho bạn xem chính đối tượng đó: mọi thuộc tính, mọi trình xử lý sự kiện, mọi tham chiếu style đã tính. Khi muốn biết một phần tử có những phương thức hay thuộc tính nào, hãy dùng dir.

Gom nhóm các thông điệp liên quan

Một phiên debug dài sẽ làm console đầy nhiễu. console.group và console.groupEnd gói các thông điệp liên quan vào một khối có thể thu gọn:

function processOrder(order) {
    console.group(`Order ${order.id}`);
    console.log("items:", order.items);
    console.log("total:", order.total);
    console.warn("shipping not set");
    console.groupEnd();
}

processOrder({ id: 42, items: ["apple", "pear"], total: 3.5 });
processOrder({ id: 43, items: ["bread"], total: 2.0 });

Mỗi lần gọi tạo ra một nhóm có tên mà bạn có thể thu gọn. Dùng console.groupCollapsed nếu muốn các nhóm thu gọn sẵn ngay từ đầu, tiện khi bạn chỉ muốn mở những nhóm trông đáng ngờ.

Đo thời gian chạy với console.time

Để kiểm tra hiệu năng nhanh, khó có gì tiện hơn console.time và console.timeEnd:

console.time("sum");
let total = 0;
for (let i = 0; i < 1_000_000; i++) {
    total += i;
}
console.timeEnd("sum");

console.log("total:", total);

Nhãn trong time và timeEnd phải trùng nhau. Bạn có thể chạy nhiều bộ đếm giờ cùng lúc với các nhãn khác nhau. Với những việc nghiêm túc hơn câu hỏi "vòng lặp này có chậm không?", hãy chuyển sang bảng Performance trong DevTools, nơi ghi lại toàn bộ timeline và flame chart.

Assertion: chỉ in khi có gì đó sai

console.assert chỉ in ra khi điều kiện là falsy. Đây là cách kín đáo để để lại các bước kiểm tra trong code mà không làm console ngập thông điệp khi mọi thứ vẫn ổn:

function setAge(user, age) {
    console.assert(age >= 0, "age should be non-negative", { user, age });
    user.age = age;
}

setAge({ name: "Ada" }, 36);   // silent - assertion passed
setAge({ name: "Boris" }, -1); // prints: Assertion failed: age should be non-negative

Rất hợp với những bất biến luôn phải đúng. Không hợp với những thứ có thể thất bại một cách hợp lệ: với chúng, hãy ném lỗi.

Stack trace khi cần

console.trace in ra call stack hiện tại mà không ném lỗi nào. Rất tiện khi bạn cần tìm xem ai đã gọi một hàm:

function inner() {
    console.trace("inner was called");
}

function outer() {
    inner();
}

outer();

Kết quả hiển thị inner → outer → (top level). Trong một ứng dụng thật, đây là cách bạn phát hiện ra trình xử lý click mình đang debug bị kích hoạt từ ba chỗ khác nhau.

Câu lệnh debugger

Cách nhanh nhất để tạm dừng JavaScript chỉ cần một từ:

function computeTotal(items) {
    const subtotal = items.reduce((s, i) => s + i.price, 0);
    debugger;
    return subtotal * 1.08;
}

Khi DevTools đang mở, debugger; hoạt động như một breakpoint: chương trình dừng ở dòng đó và bạn có đầy đủ trình gỡ lỗi, gồm các biến trong phạm vi, call stack, nút step over và step into, cùng khả năng tính giá trị biểu thức trên trạng thái hiện tại. Khi DevTools đóng, debugger; không làm gì cả.

Lần đầu dùng một trình gỡ lỗi thật thay cho console.log, bạn sẽ thấy như có siêu năng lực. Bạn thấy được mọi biến trong phạm vi mà không cần quyết định trước sẽ in gì. Bạn có thể đi qua từng câu lệnh điều kiện và xem nhánh nào chạy. Sửa một bug khó giảm từ vài phút xuống vài giây.

Hãy xóa dòng debugger trước khi commit, hoặc tốt hơn, đặt breakpoint trực tiếp trong DevTools bằng cách nhấp vào số dòng trong bảng Sources.

Những mẹo DevTools nên biết

Vài tính năng mà nhiều người bỏ lỡ suốt nhiều năm:

• Breakpoint có điều kiện: nhấp chuột phải vào số dòng trong Sources và đặt điều kiện như user.id === 42. Breakpoint chỉ kích hoạt khi điều kiện đúng.
• Logpoint: cũng trong menu đó, chọn "Add logpoint." Nó in ra thông điệp mà không tạm dừng và không cần sửa code.
• $_ trong console: biểu thức vừa được tính gần nhất. Chạy một thứ gì đó, rồi dùng $_ để lấy kết quả.
• $0: phần tử đang được chọn trong bảng Elements. $0.textContent cho bạn xem nội dung của phần tử vừa nhấp vào.
• Sao chép thành đối tượng: nhấp chuột phải vào bất kỳ giá trị nào trong console và chọn "Store as global variable." Bạn sẽ có temp1, temp2 và tiếp tục như vậy để thử nghiệm.
• Bảng Network → Copy as fetch: biến bất kỳ request nào thành một lời gọi fetch() để dán vào console và chỉnh sửa.

Không tính năng nào là bắt buộc. Nhưng tất cả đều giúp tiết kiệm thời gian khi đã thành phản xạ.

Dọn dẹp trước khi phát hành

Những lời gọi console.log còn sót lại thì vô hại khi phát triển nhưng gây nhiễu trên production. Vài thói quen hữu ích:

• Dùng một quy tắc lint (no-console trong ESLint) để đánh dấu các dòng log bị bỏ quên, với ngoại lệ cho warn và error.
• Bọc các log chi tiết trong một điều kiện: if (process.env.NODE_ENV !== "production") console.log(...).
• Ưu tiên console.debug cho các thông điệp mức trace, vì hầu hết bundler và công cụ gom log đều lọc được nó.
• Tốt hơn nữa: dùng một module logger nhỏ (hoặc thư viện như debug) để bật tắt từng nhóm log mà không cần sửa code.

Log không miễn phí. Mỗi lời gọi đều phải tuần tự hóa các đối số và ghi vào bộ đệm. Trong một vòng lặp chạy liên tục, một dòng log bị quên có thể làm chương trình chậm đi thấy rõ.

Tiếp theo: biểu thức chính quy

Bạn sẽ phải debug rất nhiều code xử lý chuỗi, và phần lớn code đó dùng regex, tính năng gọn nhất và cũng khó hiểu nhất của ngôn ngữ. Chương tiếp theo bắt đầu bằng một chuyến tham quan nhẹ nhàng về biểu thức chính quy trong JavaScript và các phương thức dùng chúng.