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.cobấ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 console bằ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.", '@duyetdev', 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.timeconsole.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();

Related