Xin chào mọi người, đối với những ai sử dụng Javascript chắc hẳn không lạ gì với việc sử dụng console.log trong quá trình làm việc. Bài viết hôm nay mình sẽ giới thiệu qua một số điều thú vị mà console.log có thể làm được cũng như về một số anh chị em họ hàng trong gia đình console nhé.
1. console.log() | console. info() | console.error() | console.warn()
Phần lớn chúng ta đã rất quen thuộc với với việc sử dụng console.log để debug hoặc để show 1 số kết quả cần thiết trong quá trình coding của mình. Bên cạnh đó, chúng ta còn có thể sử dụng một số anh em khác như info(), error(), warn() để in ra kết quả cần thiết với những kí hiệu hoặc màu sắc khác nhau. Các bạn có thể thử với trình duyệt của mình
console.log("console.log"); console.info("console.info"); console.warn("console.warn"); console.error("console.error");
Ta được kết quả sau với Chrome
Ta có thể thấy trên Chrome thì console.log() sẽ hiển thị không khác gì so với console.info(), tuy nhiên trên Firefox thì console.info sẽ có 1 icon chữ i ở phía trước
2. Sử dụng substitution string và Style cho console message
Sử dụng substitution string
Tương tự hàm System.io.printf trong Java, console.log cũng có thể sử dụng string substitution như sau:
- %o: thay thế cho object
- %s: thay thế cho string và
- %n thay thế cho number (decimal hoặc integer)
Ví dụ:
const data = { index: 1, name: "Alice", location: { name: "Viet Nam", zipCode: 122334 } } console.log('User %s who has number %d is located in %o ', data.name, data.index, data.location)
Styling console message
Bạn đã bao giở thử inspect console.log của Facebook và thấy kết quả như vầy chưa:
Chúng ta cũng có thể làm như vậy bằng cách styling cho message từ console.log bằng cách sử dụng placeholder %c như sau:
console.log('%cStop!', 'color: red; font-size: 40px; font-weight: bold; text-shadow: 0 0 1px #000;');
3. console.table
Hàm console.table cho phép hiện thị dữ liệu dạng bảng ở console. Hàm này nhận một tham số bắt buộc là data muốn hiển thị (có thể là mảng hoặc là object)
const products = [ { name: "RAM", quantity: 2, price: 30.99 }, { name: "SSD", quantity: 5, price: 600.99 }, { name: "Keyboard", quantity: 1, price: 59.9 }, ]; console.table(products);
Ngoài ra, console.table còn nhận 1 tham số optional nữa là các cột mà muốn hiển thị.
Lấy ví dụ trên, nếu ta chỉ cần hiển thị name và price của các item thì ta làm như sau:
console.table(products, ['name', 'price']);
4. console.group
Chúng ta có thể nhóm các console message thành cụm và theo từng level bằng cách dùng console.group và console.groupEnd
console.log("Outer level"); console.group(); console.log("Level 1"); console.group(); console.log("Level 2 inside level 1"); console.groupEnd(); console.log("Level 1 again"); console.groupEnd(); console.log("Back to outer level");
Một ví dụ thực tế với console.group đó là redux-logger
5. console.time
console.time sẽ start 1 timer để track thời gian thực hiện của tác vụ. Ta bắt đầu timer bằng việc đặt 1 tên (label) cho console.time. Đến khi gọi console.timeEnd với cùng tên thì browser sẽ hiển thị thời gian thực hiện tác vụ nằm giữa theo milisecond
6. console.clear
Và cuối cùng, để xóa hết tất cả cá console message ở trên thì ta dùng console.clear(); để thực hiện
Kết:
Hi vọng qua bài viết này, các bạn có thể sử dụng console.log 1 cách hiệu quả hơn trong quá trình làm việc cũng như debug code Javascript trên trình duyệt.
Thanks
Reference
