CodeLabo

Console không chỉ có phương thức log

2018-09-14

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

Logging

Như đã nói ở trên, chúng ta sử dụng console.log để in giá trị ra màn hình console.

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

Tuy nhiên, console còn có 3 phương thức khác dùng để in giá trị ra màn hình là warn, info, 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ị, warnerror còn có style khác và cho chúng ta biết stack trace, giúp bạn xác định lỗi xuất hiện ở đâu trong trường hợp xảy ra lỗi.

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();

console.dir && console.dirxml

console.dir in ra object sau khi đã được format đẹp đẽ.

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

console.dir(fancyThings);


Còn console.dirxml thì in ra markup của DOM element. Ví dụ:

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

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

<body>
  <h1>hello</h1>

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

</html>

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

Dùng để clear console.

console.clear();

console.count

Chúng ra dùng phương thức này để đếm số lần phương thức này được gọi.

[1, 2, 3, 4, 5].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

Đếm giờ

Dùng console.time để bắt đầu và console.endTime để kết thúc timer. Ta có thể truyền vào 1 string làm tên cho timer. Tên trong console.time phải trùng khớp với trên trong console.endTime.

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

// fetching data: 0.2939453125ms
// (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Group

Sử dụng console.groupconsole.groupEnd để nhóm các giá trị trong output 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();

Table

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

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

var catena = new Single(
    "Có ai thương em như anh",
    "Tóc Tiên",
    "2018"
    );

console.table(catena);

Sử dụng CSS Style

Ta có thể áp dụng style trong console.log bằng cách dùng dấu phân cá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);'
);

Và đây là kết quả:

Style trong tham số thứ 2 sẽ được áp dụng cho những giá trị đằng sau dấu %c thứ nhất, style tiếp theo sẽ được áp dụng cho những giá trị đằng sau dấu %c thứ hai, và cứ thế…