console.log() nâng cao

Là một lập trình viên Javascript/Nodejs, ắt hẳn ai cũng đã quen với các hàm console.* để debug. Nay tôi xin giới thiệu các tính năng cách sử dụng hay và ít được biết đến của các hàm console.* này.

Truy cập https://saveto.co và bấm F12

console.*

Cùng ôn lại các hàm của console. Bạn có thể test ngay bằng cách sử dụng trình debug (F12) trên trình duyệt.

• console.log() in ra chuỗi, hàm, hằng, mảng, object, ...
• console.info() tương tự console.log, in ra 1 message information.
• console.error() in ra thông tin lỗi.
• console.count() in ra số lần lặp lại khi gọi hàm với 1 tham số cụ thể (thường dùng để debug số lần lặp).
• console.clear() xóa sạch console trên trình duyệt.
• console.dir(obj) xem toàn bộ các thuộc tính của 1 object javascript.
• ...

Định dạng css cho console.log

Ta có thể định dạng lại các message in ra consolebằng CSS. Chỉ cần viết thêm tham số %c và CSS vào tham số cuối cùng. Ví dụ:

var css =
  'background-color: #FFCC00; color: #FFF; font-weight: 700; padding: 10px'
console.log('%cTôi là Duyệt', css)

Template string

Các hàm console.* cũng hỗ trợ template string.

console.log("I'm %s and %s years old.", '@duyet', 20)

Vẽ bảng với console.table()

Debug với array hoặc object phức tạp và không trực quan. console.table() giúp hiển thị dữ liệu dưới dạng bảng ngay trên console.

var people = [
  ['Van-Duyet', 'Le'],
  ['Kim', 'Ngan'],
  ['XYZ', 'ABC'],
]
console.table(people)

Có thể sort trực tiếp trên dữ liệu.

Làm việc với Object:

var jobs = [
  { name: 'Lê Văn Duyệt', age: 20, job: 'Ăn hại' },
  { name: 'Lê Văn X', age: 20, job: 'Ăn ngủ' },
]
console.table(jobs)

console.time()

console.time và console.timeEnd đo thời gian runtime, từ khi console.time chạy cho đến khi console.timeEnd kết thúc.

console.time('Thời gian debug hàm X: ')
// do some thing ....
console.timeEnd('Thời gian debug hàm X: ')
// => Thời gian debug hàm X: : 15986.679ms

Nhóm các message với console.group

console.group giúp gom các message lại thành 1 group inline. Xem ví dụ sau:

console.group('Todo')
console.log('Ngủ')

console.group('Ăn')
console.log('Bún bò')
console.log('Phở')
console.log('Chè')
console.log('...')
console.groupEnd()

console.log('Đi chơi')
console.groupEnd()

Tham khảo

• https://developer.mozilla.org/en-US/docs/Web/API/console
• Advanced Logging with the JavaScript Console