Mục lục
Bạn đang sử dụng console.log để debug cho ứng dụng của bạn phải không? Nếu sử dụng cách thông thường như
console.log('aa');
thì quá dễ dàng rồi phải không nào, trong thực tế chúng ta có thể làm nhiều thứ hơn với console.log, và một số biến thể của console.log phục vụ cho các mục đích khác nhau. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách sử dụng console.log sao cho hiệu quả nha.
Interpolating
Nếu muốn xuất giá trị của một biến, có phải bạn sẽ làm như sau
const a = 'World';
console.log('Hello ' + a);
Cách này không sai, nhưng chúng ta cũng có một số cách khác có thể làm tốt hơn.
Toán tử %
Cách đầu tiên là sử dụng toán tử %. Cách này được dùng trong hầu hết các ngôn ngữ không riêng gì Javascript, được sử dụng như sau:
console.log('Hello %s', a);
Ngoài ra chúng ta cũng có một số lựa chọn khác như %i cho số nguyên và %f cho số thực.
Template String
Một Template string sẽ được đặt trong cặp dấu “.
const a = `This is a template string`;
Nhưng nếu sử dụng template string mà không có tham số là việc không cần thiết, chúng ta có thể thay ví dụ trên thành string thông thường.
Để sử dụng template string đúng cách, bạn cần sử dụng kèm với ${}, cho biến chèn vào template string một giá trị tham số bất kỳ.
const a = 'World';
console.log(`Hello ${a}`);
Áp dụng style cho console.log
Really? Nếu bạn đang muốn console.log một dòng nào đó trong nổi bật hơn những thứ khác, chúng ta có thể áp dụng css cho nó đấy. Để làm được, chúng ta cần thêm %c vào đầu chuỗi được in, và tham số thứ 2 chính là css cho nó. Thử F12 và chạy thử đoạn code dưới đây xem nhé.
console.log('%c I am a great text!', 'font-size: 26px; color: blue;');
Warning
Nếu bạn chỉ muốn cảnh báo một điều gì đó xảy ra trong ứng dụng của bạn, tại sao lại không sử dụng console.warn thay vì console.log mặt định nhỉ?
console.warn('This is some warning');
Error
Ok, đối với những error trong ứng dụng chúng ta nên sử dụng console.error thay vì console.log mặc định để tăng tính nghiêm trọng và giúp chúng ta chú tâm nhiều hơn đến các lỗi này.
Infor
Đôi lúc bạn chỉ muốn in ra màn hình một thứ gì đó để kiểm tra xem function này có được gọi không chẳng hạn, dùng console.infor nhé.
console.info('Just a simple information');
Assert
Để kiểm tra giá trị của các biến, hay kết quả trả về của một function chúng ta có thể sử dụng console.assert.
console.assert(1 !== 1, '1 is equal to 1');
Tham số đầu tiên là mệnh đề trả về TRUE hoặc FALSE, tham số thứ 2 là message được hiển thị khi kết quả trả về FALSE.
Gom nhóm
Khi bạn logging trong lúc duyệt một mảng, nó sẽ khiến màng hình console trở nên khó nhìn vì hàng loạt các dòng được in ra cùng lúc.
const dogs = [
{ name: 'Ricota', age: 2 },
{ name: 'Gorgonzola', age: 8 }
];
dogs.forEach(dog => {
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
})
Để giải quyết vấn đề này, chúng ta có 2 lựa chọn
console.group
console.group sẽ giúp gom nhóm một loạt các dòng được in ra trong một block mà chúng ta có thể đóng mở được
dogs.forEach(dog => {
console.group(dog.name); // This is the group title
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
Trong đó console.group dùng để chỉ định thuộc tính cần được gom nhóm và groupEnd để xác định vị trí cuối cùng được gom nhóm.
console.groupCollapsed
Vì cơ chế thì console.groupCollapsed hoạt động tương tự console.group, điểm khác biệt duy nhất là các block được in ra mặc định sẽ được đóng lại.
Table
Một cách tốt hơn để kiểm tra giá trị của một mảng là in chúng ra dưới dạng table.
const dogs = [
{ name: 'Ricota', age: 2 },
{ name: 'Gorgonzola', age: 8 }
];
console.table(dogs);
Clear
Một khi màn hình console chứa hàng loạt các giá trị được in ra trước đó, khiến cho bản thân cảm thấy rối mắc, bạn có thể làm mới màn hình console với lệnh console.clear() để chuẩn bị cho lần debug tiếp theo.
console.clear();
Kết luận
Sẽ không có vấn đề gì nếu bạn sử dụng console.log cho mọi trường hợp. Thế nhưng nếu sử dụng các tính năng kể trên đúng mục đích thì có thể giúp quá trình gỡ lỗi ứng dụng nhanh chóng hơn đấy.