ViệtNếu bạn là lập trình viên front-end, chắc chắn bạn đã quen thuộc với việc dùng console.log() để debug trong quá trình phát triển. Tuy nhiên, mặc định thì các dòng log thường khá “nhàm chán” – chỉ là văn bản đen trắng đơn điệu.
Điều ít ai biết là console.log hoàn toàn có thể thêm CSS để trở nên sinh động hơn. Việc này không chỉ giúp bạn phân biệt các loại thông báo dễ dàng, mà còn khiến quá trình debug trở nên trực quan, vui vẻ hơn.
Trong bài viết này, chúng ta sẽ cùng khám phá bí mật của ký hiệu %c, cách thêm CSS cho console.log, và áp dụng nó vào nhiều ví dụ thực tế.
Tại sao nên thêm CSS cho console.log?
1. Nâng cao khả năng debug
Thay vì phải đọc hàng tá log giống nhau, bạn có thể dùng màu sắc để phân loại: log thông tin, log cảnh báo, log lỗi.
2. Tăng hiệu quả làm việc
Trong một project lớn, console thường chứa đủ loại log. Nếu bạn highlight được log quan trọng, bạn sẽ tiết kiệm kha khá thời gian tìm kiếm.
3. Trực quan và dễ đọc
Console có màu sắc, hộp thông báo, nhãn rõ ràng → nhìn là biết ngay thông tin nào quan trọng.
👉 Nói cách khác, console.log có CSS = debug như pro.
Cú pháp cơ bản – Bí mật nằm ở %c
Để thêm CSS, bạn chỉ cần dùng %c ở trước đoạn text cần style, và truyền chuỗi CSS vào tham số tiếp theo.
Cú pháp:
console.log("%c [message]", "[css_string]");
Ví dụ cơ bản:
console.log("%cĐây là một log màu đỏ!", "color: red; font-size: 16px;");
Kết quả: Một dòng chữ đỏ, to hơn hiện trên console.
Các ví dụ thực tế và nâng cao
Ví dụ 1: Làm nổi bật lỗi và cảnh báo
console.log(
"%cLỗi: Dữ liệu không hợp lệ",
"color: white; background-color: red; padding: 2px 5px; border-radius: 4px;"
);
console.log(
"%cCảnh báo: Thiếu dữ liệu đầu vào",
"color: black; background-color: yellow; padding: 2px 5px; border-radius: 4px;"
);
👉 Giúp bạn phân biệt ngay đâu là lỗi (Error) và đâu là Warning.
Ví dụ 2: Tạo box thông báo thành công
console.log(
"%cThành công!",
"background-color: green; color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;"
);
Kết quả: Một “badge” màu xanh, chữ trắng, nhìn như thông báo trên UI.
Ví dụ 3: Định dạng nhiều phần của một chuỗi
Bạn có thể sử dụng nhiều %c để style từng phần riêng biệt.
console.log(
"%cTên: %cNguyễn Văn A",
"font-weight: bold; color: blue;",
"color: black;"
);
👉 “Tên:” sẽ được in đậm, màu xanh, còn giá trị thì màu đen bình thường.
Ví dụ 4: Kết hợp với console.group
Ngoài màu sắc, bạn còn có thể nhóm log để dễ đọc hơn.
console.groupCollapsed("%cThông tin người dùng", "color: purple; font-weight: bold;");
console.log("%cTên: %cNguyễn Văn A", "font-weight: bold;", "color: black;");
console.log("%cTuổi: %c25", "font-weight: bold;", "color: black;");
console.groupEnd();
👉 Nhóm thông tin vào một “folder” có thể collapse/expand trong console.
Các thuộc tính CSS được hỗ trợ và lưu ý quan trọng
Thuộc tính CSS phổ biến có thể dùng:
- color: màu chữ.
- background / background-color: nền.
- font-size: kích thước chữ.
- font-weight: độ đậm.
- padding, margin, border-radius: tạo “box” đẹp mắt.
- text-shadow, box-shadow: thêm hiệu ứng nhẹ.
Lưu ý:
- Không phải tất cả CSS đều hoạt động (ví dụ:
transform,transitionkhông có tác dụng). - CSS chỉ hiển thị trong Developer Console của trình duyệt (Chrome, Firefox, Edge).
- Nếu console bị spam log quá nhiều, hãy cân nhắc vì màu sắc đôi khi cũng gây rối mắt.
Mẹo tái sử dụng style:
Bạn có thể định nghĩa style trong biến và dùng lại nhiều lần:
const successStyle = "color: white; background: green; padding: 5px; border-radius: 3px;";
const errorStyle = "color: white; background: red; padding: 5px; border-radius: 3px;";
console.log("%cThành công!", successStyle);
console.log("%cLỗi nghiêm trọng!", errorStyle);
Kết bài
Sử dụng console.log với CSS không chỉ là một “chiêu” thú vị, mà còn tăng hiệu quả debug rõ rệt. Bạn có thể phân loại log bằng màu sắc, làm nổi bật thông báo quan trọng, hoặc nhóm các log thành từng phần rõ ràng.
Hãy thử ngay trong dự án của bạn – chắc chắn bạn sẽ thấy việc debug bớt khô khan, thậm chí còn vui hơn!
👉 Bạn đã thử thêm CSS cho console.log chưa? Nếu có mẹo hay hơn, hãy chia sẻ cùng mọi người ở phần bình luận nhé!
