[JavaScript] Web APIs - Console

console 중에 아는 건 console.log() 말곤 없었다... JS를 다루는 사람들에겐 뗄 수 없는 동반자가 아닐까. 아무튼 이 console에도 여러 메서드가 있다는 걸 알았다.

 

console

 

console은 브라우저의 디버깅에 대한 엑세스를 제공한다고 한다. 아래 코드들을 살펴보면서 무슨 말인지 알아보도록 하자

 

이번에 console.clear()라는 걸 알고 친구들과 단톡방에서 누군가 염장지르는 말을 하면 저걸 치고 카톡방을 나갔다 오고는 한다. 썩 괜찮은 드립일지도 모른다. 컴과생들만 재밌는 드립을 치고 있었을 줄이야.

 

// console
// .log(), .warn(), .error(), dir()

// 콘솔에 메시지나 객체를 출력

// - log: 일반메시지
// - warn: 경고메시지
// - error: 에러메시지
// - dir: 속성을 볼 수 있는 객체 출력

console.log('Hello World!');
console.warn('Hello World!');
console.error('Hello World!');
console.dir('Hello World!');

// count(), countReset()
// 콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화함

// console.count('이름');
// console.countReset('이름');

console.count('a'); // a:1
console.count('a'); // a:2
console.count('b'); // b:1
console.count('a'); // a:3
console.log('Reset a!'); // Reset a!
console.countReset('a');  
console.count('a'); // a:1
console.count('b'); // b:2

// time(), timeEnd()
// 콘솔에 타이머가 시작해서 종료되기까지의 시간(ms)을 출력

// console.time('이름');
// console.timeEnd('이름');

console.time('반복문');

for (let i = 0; i < 1000; i++) {
  console.log(i);
}
console.timeEnd('반복문');

// trace()
// 메소드 호출 스택(call stack)을 추적해 출력

function a () {
  function b() {
    function c () {
      console.log('Log');
      console.trace('Trace!'); // c함수 내부에서 실행
    }
    c(); // b함수 내부에서 실행
  }
  b(); // a함수 내부에서 실행
}
a(); // 익명함수에서 실행

// clear()
// 콘솔에 기록된 메시지를 모두 삭제

console.clear(); // 콘솔이 지워졌습니다 (Edge 기준)

// 서식 문자 치환
// %s - 문자로 적용
// %o - 객체로 적용
// %c - CSS를 적용