console.log thế nào cho hiệu quả

Xin chào, lại là mình đây. Bạn nào từng code Javascript (và những người bạn của nó) thì không lạ gì sử dụng console.log() để debug.

Mình xin giới thiệu cho các bạn một số chiêu mình tìm được để console.log thú vị hơn.

console.log() các Object

Ví dụ ta có các Object như sau

const kinhDo = { nhan: "thap cam", size: "large", egg: true }
const huuNghi = { nhan: "dau xanh", size: "small", egg: false }
const baoNgoc = { nhan: "sua dua", size: "large", egg: false }

Không nên

console.log(kinhDo)
console.log(huuNghi)
console.log(baoNgoc)

Nên

console.log({ kinhDo, huuNghi, baoNgoc })

Kết quả được như sau:

Thêm màu mè cho console.log

Có thể chỉnh style giống như CSS bằng cách thêm %c trước cái cần in ra
Ví dụ

console.log('%c Console log with color', 'color: blue; font-weight: bold');

Kết quả là

In kết quả theo dạng bảng

Nếu các object có chung các thuộc tính thì có thể in chúng theo dạng bảng sử dụng console.table()
Ví dụ

console.table([kinhDo, huuNghi, baoNgoc])

Ta sẽ được

Tính thời gian để thực hiện một đoạn code

Sử dụng console.time() và console.timeEnd()

Ví dụ

console.time('looper');

let i = 0;
while(i < 100000) { i++; }

console.timeEnd('looper');

Xem 1 function được gọi ra ở đâu

Dùng console.trace()

Ví dụ

Tab console trên trình duyệt sẽ hiển thị chính xác nơi mà function được khai báo và được gọi.

Kết

Vậy đó, hy vọng một số mẹo nhỏ này sẽ có ích cho bạn. Chúc bạn console.log vui vẻ!