Style console.log sử dụng CSS bạn đã biết chưa?

Chào các bạn, trong bài viết này chúng ta cùng tìm hiểu cách style Chrome DevTools Console nhé. Bạn có thể đọc bài viết sử dụng console.log() trong JavaScript để xem cách log message ra console nhé.

Như chúng ta đã biết Console là một công cụ giúp ích rất nhiều trong quá trình chúng ta viết code. Sử dụng method console.log() trong Javascript giúp chúng ta hiện các thông tin theo ý muốn tới console. Nếu bạn muốn thông tin hiện ra ở console có màu sắc, kích thước,... tùy theo thiết kế của bạn thì chúng ta cùng tìm hiểu cách áp dụng style cho console nhé.

Format console messages

Chúng ta sẽ sử dụng Format specifiers để định dạng thông tin được in ra ở console. Hiểu đơn giản thì nó giúp cho trình biên dịch (compiler) biết kiểu dữ liệu bạn truyền vào console.log().

Format specifiers bắt đầu bằng ký tự phần trăm (%) và kết thúc bằng một ký tự kiểu cho biết kiểu dữ liệu (string, integer,...).

Ví dụ:

Để mở console của DevTools trên Chrome các bạn nhấn tổ hợp phím: ctrl + shift + j.

Sau đó, thêm đoạn code dưới đây:

const blog = {name: 'homiedev.com'};
console.log('Object %o', blog);

Mình đã chỉ định specifier cho blog là kiểu object (%o) và kết quả chúng ta được:

Dưới đây là danh sách format specifiers mà Chrome DevTools hỗ trợ.

Sau đây chúng ta cùng xem cách style console nhé 💅

Style console messages

Để thêm CSS style cho console output, chúng ta sử dụng CSS format specifier %c. Khi thêm %c vào chuỗi thì css sẽ được áp dụng cho chuỗi tính từ %c trở đi. Ví dụ bạn đặt %c ở đầu chuỗi thì toàn bộ chuỗi sẽ được áp dụng css.

Bây giờ chúng ta sử thêm style này cho console và xem kết quả:

console.log("%cHọc JavaScript từ %ca -> ă", "color:green", "color:blue");

Ở ví dụ trên, Học JavaScript từ sẽ có style "color:green", a -> ă sẽ áp dụng style "color:blue". Kết quả chúng ta được:

Khi chúng ta đã hiểu cách làm thì các bạn có thể tự thêm các style theo ý muốn, ví dụ như này 👇:

const style = `padding: 10px; background: #231f20;
               border-radius: 5px; color: #f14a4a;`;

console.log('%chomiedev.com', style);

Kiểm tra console, chúng ta sẽ được như sau:

Như vậy là mình đã chia sẻ cho các bạn cách chúng ta có thể in ra một thông báo, một warning hay error cho console với style do chính chúng ta tùy biến. Hi vọng bài viết giúp ích cho các bạn. Chúng ta sẽ gặp lại nhau trong các bạn viết sắp tới nhé 😄.