Console APIs trong Javascript

Bạn có biết là ngoài dùng console.log để debug thì còn rất nhiều cách khác với console nữa hay không ?

Hiện tại việc dùng console.log luôn là cứu cánh rất hữu dụng để các web developer phát hiện lỗi bằng cách in ra message trong browser console. Bạn có thể xem tất các api với console bằng window.console

 Bên dưới mình sẽ đưa ra một vài ví dụ về các hàm mà mình thấy hữu ích và hay dùng nhất :))

Những hàm này sẽ hiển thị log theo màu sắc khác nhau tuỳ thuộc vào event bạn chọn

Bên dưới mình liệt kê một vài placeholder khác nhau 

%o - nhận và in ra object

%s - nhận và in ra string

%d hoặc %i - nhận và in ra số nguyên

%f - nhận và in ra số  phân

Bạn đã quá chán nản với mấy dòng log khô khan với màu sắc mặc định, yên tâm chúng ta có thể style lại cho bọn nó được bằng cách dùng placeholder %c ngay trước đoạn log cần được style, tham số thứ 2 là CSS string.

Hoặc có thể chỉ style cho một phần của đoạn log thôi 

Hoặc thậm chí có thể style log như cách mà Facebook đã làm trong log của họ

Hoặc "7 sắc cầu vồng" :))

Hàm này được dùng để in ra một object trong console với các thuộc tính bên trong

Thay vì inspect thì bạn cũng có thể log ra một phần tử cụ thể nào đó bằng cách lấy phần tử muốn log với các DOM methods như là getElementById, querySelector, ...

Đây là hàm mình hay dùng để log các object hoặc array  dưới dạng bảng nhìn để dễ nhìn và dễ debug hơn

Lồng các log message theo phân cấp cha con, giống như cây thư mục vậy á :))

Hàm này dùng để đếm số lần gọi hàm count với tham số là một label , nếu không truyền tham số thì hàm count sẽ đếm số lần thực thi với label là default

Thường dùng để in ra lỗi , nếu tham số đầu tiên là true thì hàm này không thực thi, nếu là false thì sẽ log ra data trong tham số thứ 2

Hàm này mình cũng không hay dùng lắm nhưng đại loại là nó sẽ "lần theo dấu" hàm thực thi trong một stack 

Khi đặt trace vào trong hàm bar thì log hiển thị dạng stack với hàm con bar đặt trên đầu ( chỗ này hơi khó hiểu, mn nếu ai hiểu rõ có thể giúp mình giải thích kĩ hơn bên dưới comment nha :D)

Một hàm cực kì hữu ích dùng để đo thời gian thực thi của các hàm Javascript

Cuối cùng nhưng không thể thiếu là destroy toàn bộ lịch sử log mà các bạn vừa viết :))

Nguồn: 

OK, đây là một vài hàm với console mà mình nghĩ là hữu dụng, mọi người nếu biết thêm có thể giúp mình bổ sung hoặc góp ý cho bài viết của mình nha <3

Chúc mọi người năm mới vui vẻ !