Console không chỉ có log

20/10/2018 — @nguyenhaiduc06
900 từ — Đọc trong 3 min

Bài Của Người Quen
Bài viết gốc được đăng tại website của CodeLabo. Đừng quên ghé qua thăm nha.

Nếu bạn cũng muốn bài viết của mình xuất hiện trên Ehkoo, đừng ngần ngại, hãy email cho chao [at] ehkoo.com kèm theo link bài nhé. Ehkoo sẽ thảo luận với bạn trước khi đưa bài lên sóng.

console là công cụ đắc lực hỗ trợ chúng ta trong quá trình phát triển ứng dụng, đặc biệt là khi tìm và sửa lỗi. Tuy nhiên, console còn rất nhiều phương thức khác cũng thú vị và hữu ích không kém. Hãy cùng CodeLabo tìm hiểu trong bài viết này nhé!

console.log

console.log có lẽ là phương thức được sử dụng nhiều nhất để in giá trị của biến ra màn hình.

const name = 'CodeLabo'
console.log('Hello', name) // Hello CodeLabo

Bên cạnh đó, console còn có 3 phương thức khác có tính năng tương tự: .warn, .info, và .error.

console.info('CodeLabo - more experiments, more knowledge')
console.warn('Hãy like Facebook Page của CodeLabo nhé!')
console.error('Đừng quên share cho mọi người cùng biết nha!')

Ngoài việc in giá trị, .warn.info hiển thị kết quả ở một định dạng khác, giúp bạn phân biệt “mức độ nghiêm trọng” của thông điệp, trong khi .error in ra stack trace, giúp bạn xác định lỗi xuất hiện ở đâu.


Bạn có thể dùng tính năng lọc để lựa chọn hiển thị kết quả theo từng loại thông điệp. Tính năng này có mặt ở hầu hết các trình duyệt.

console.trace

Chúng ta cũng có thể in ra stack trace bằng cách sử dụng console.trace.

function hello(name = 'CodeLabo') {
  console.trace('name:', name)
  return `Hello ${name}!`
}

hello()

Kết quả:

console.dirconsole.dirxml

console.dir in ra JavaScript sau khi đã được định dạng đẹp đẽ.

const fancyThings = {
  car: '🏎️ Ferrari',
  watch: '⌚ Cartier',
  clothing: {
    shoes: '👠 Christian Louboutin',
    dress: '👗 Versace',
  },
  boat: '🛥️ Sunseeker',
}

console.dir(fancyThings)

Riêng console.dirxml thì in ra markup của nút DOM. Ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- ... -->
</head>

<body>
  <main>
    <h1>hello</h1>
    <p>this is a <strong>text</strong></p>
  </main>

  <script>
    console.dirxml(document.body);
  </script>
</body>

</html>

Kết quả trên Google Chrome:

console.assert

console.assert sẽ nhận 2 tham số. Nếu tham số thứ nhất trả về false, tham số thứ 2 sẽ được in ra màn hình.

// 1 + 1 == 2, trả về true, không có gì được in ra cả
console.assert(1 + 1 === 2, '1 + 1 khác 2')

// 1 + 1 == 3 trả về false, '1 + 1 khác 3' sẽ được in ra
console.assert(1 + 1 === 3, '1 + 1 khác 3')

console.clear

Bạn có thể gọi phương thức console.clear() để xóa đi những kết quả đã được in ra trước đó. Hoặc bạn có thể nhấn Ctrl + L trong Chrome, hoặc Ctrl + Shift + L trong Firefox, để đạt được kết quả tương tự.

console.clear()

console.countconsole.countReset

Mỗi lần bạn gọi đến console.count(), phương thức này sẽ tự động tăng lên 1. Bạn có thể truyền vào một nhãn tùy ý để đánh dấu các bộ đếm khác nhau. Và bạn dùng console.countReset(label) để quay ngược bộ đếm về lại 0.

const arr = [1, 2, 3, 4, 5]
arr.forEach(nb => {
  if (nb % 2 === 0) {
    console.count('chẵn')
  } else {
    console.count('lẻ')
  }
})

// lẻ: 1
// chẵn: 1
// lẻ: 2
// chẵn: 2
// lẻ: 3

Đo thời gian thực thi

Để đo thời gian thực thi của một đoạn mã, bạn có thể dùng console.timeconsole.endTime. Phương thức console.time(label) nhận vào một chuỗi dùng làm nhãn cho bộ đếm giờ. Sau đó gọi đến console.endTime(label) với nhãn cùng tên, để hiển thị thời gian thực thi.

console.time('fetching data')
fetch('https://jsonplaceholder.typicode.com/users')
  .then(d => d.json())
  .then(() => console.timeEnd('fetching data'))

// fetching data: 424ms

Đặt kết quả vào nhóm

Sử dụng console.groupconsole.groupEnd để nhóm các giá trị được hiển thị lại với nhau. Ta cũng có thể đặt tên cho các group, và group này có thể nằm trong group khác.

console.group('🖍️ colors')
console.log('green')
console.log('orange')
console.group('HEX')
console.log('#1AB374')
console.log('#FF7B5F')
console.groupEnd()
console.log('blue')
console.groupEnd()

console.table

Phương thức console.table giúp chúng ta hiển thị array hoặc object dưới dạng bảng.

function Single(title, singer, year) {
  this.title = title
  this.singer = singer
  this.year = year
}

const s = new Single('Có ai thương em như anh', 'Tóc Tiên', '2018')

console.table(s)

Sử dụng CSS Style

Có bao giờ bạn mở console khi đang xài Facebook và nhận được thông báo như thế này:

Họ đã làm điều đó như thế nào? Hóa ra, ta có thể áp dụng CSS style trong console.log bằng cách dùng kí tự đặt chỗ %c.

console.log(
  'Hello %cCodeLabo%c!',
  'color: #1ab374; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);',
  'color: #ff7b5f; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);',
)

Mỗi %c sẽ định dạng cho những ký tự phía sau nó. Kết quả là:

Bên cạnh %c, console còn hỗ trợ những kí tự đặt chỗ khác như %o, %f hay %d. Bạn có thể xem chi tiết ở đây.

Kết

Ngoài việc cung cấp phương thức console.log() rất hữu dụng khi tìm và sửa lỗi, console còn có những phương thức khác cũng rất tiện dụng trong quá trình phát triển dự án. Bạn có biết cách sử dụng console nào sáng tạo hơn nữa không? Hãy cùng chia sẻ nhé.

Bạn thích bài viết này? Đăng ký nhận Bản tin Ehkoo NGAY, để luôn được cập nhật tin tức mới nhất về thế giới front-end nhé!


Bình luận

Đăng ký bản tin

Quá lười để vào Ehkoo mỗi ngày? Không sao hết, Ehkoo sẽ gửi bài cho bạn mỗi tuần.

Đảm bảo chất lượng, hứa không bao giờ spam.