콘솔 API

우리가 주로 사용하는 console.log(error, warn, info, debug) 외 유용한 콘솔 API에 대해 알아보겠습니다.

console.dir

객체의 속성을 계층 구조로 출력합니다. 특히 DOM 노드를 출력할 때 유용합니다(console.log는 DOM 노드를 출력하면 해당 노드의 HTML 코드가 출력됩니다).

console.dir(object)

• object: 출력할 객체

const div = document.createElement("div");
console.log(div);
console.dir(div);

console.table

배열이나 객체 데이터를 표 형태로 출력합니다. 표 형태로 출력되어 데이터를 더 쉽게 분석할 수 있습니다.

console.table(arrayOrObject, columns)

• arrayOrObject: 출력할 배열이나 객체
• columns: 출력할 컬럼명을 담은 문자열 배열

const people = [
  { name: "John", age: 23 },
  { name: "Anna", age: 33 },
  { name: "Tom", age: 41 },
];
console.table(people);
// 두번째 인수에는 출력할 컬럼을 배열로 전달할 수 있습니다.
console.table(people, ["name"]);

console.group

로그 메시지를 그룹화하여 출력하고 싶을 때 사용합니다.

다음 3개의 메서드를 함께 사용합니다. label은 그룹을 구분하기 위한 이름으로 사용됩니다. 그룹은 중첩된 구조로도 표현할 수 있습니다.

• console.group(label): 그룹 시작 (펼쳐진 상태)
• console.groupCollapsed(label): 그룹 시작 (접힌 상태)
• console.groupEnd(label): 그룹 종료

console.group('유저');
console.log('이름: someone');
console.log('이메일: someone@gmail.com');
console.group('주소');
console.log('시: 서울');
console.log('구: 강남구');
console.log('동: 대치동');
console.groupEnd();
console.groupCollapsed('경력');
console.log('현직장: 바닐라코딩');
console.log('연차: 8년')
console.groupEnd();
console.log('전화번호: 010-xxxx-xxxx');
console.groupEnd();

console.count

특정 코드의 실행 횟수를 측정하고 싶을 때 사용합니다.

다음 2개의 메서드를 함께 사용합니다. label은 카운터를 구분하기 위한 이름으로 사용됩니다.

• console.count(label): 카운트 증가
• console.countReset(label): 카운트 초기화

for (let i = 0; i < 6; i++) {
  if (i === 3) {
    console.countReset('카운터');
  }
  console.count('카운터');
}

console.time

코드들의 실행 시간을 측정하고 싶을 때 사용합니다.

다음 3개의 메서드를 함께 사용합니다. label은 타이머를 구분하기 위한 이름으로 사용됩니다.

• console.time(label): 실행 시간 측정 시작
• console.timeLog(label): 실행 시간 측정 중간에 로그 출력
• console.timeEnd(label): 실행 시간 측정 종료

console.time('타이머');

for (let i = 0; i <= 100000; i++) {
    if (i % 50000 === 0) {
        console.timeLog('타이머');
    }
}

console.timeEnd('타이머');