콘솔(console) 잘 사용하는 법

js 콘솔 실행 화면

안녕하세요. 

오늘은 콘솔에 대한 포스팅을 작성하려고 합니다. 

 

 

 

혹시 console.log()외에도 유용한 콘솔이 많다는 것을 알고 계셨나요?

모르셨다면 이번 포스팅을 통해 배워나가시면 좋을 것 같습니다. 

 

console.log() 디버깅을 하거나 개발 중 데이터 형태 등을 확인할 때 많이 사용합니다. 

하지만 이 밖에도, 다양한 콘솔을 개발 중 유용하게 사용할 수 있습니다. 

 

오류 콘솔

 

대표적으로 오류의 정도에 따라 다음과 4가지를 사용하면 됩니다. 

 

error.js

//log level

console.log('log');// 개발 - 출력
console.log('info');// 정보
console.warn('warn');// 경보
console.error('error'); // 주요한 에러

위에서부터 오류의 정도가 점점 커진다고 생각할 수 있습니다. 

 

유용한 콘솔

 

그밖에도 유용한 콘솔을 알아보면 다음과 같습니다. 

console.js

const dogObject = {type: 'animal', name: '뽀삐', owner: {name: 'dragon', age: 22}}

//assert
//조건이 참일 때만 콘솔 찍힘
console.assert(2 === 3, 'not same!');// 미출력
console.assert(2 === 2, 'same!');//출력

//표로 객체 확인하기 
console.table(dogObject);

//객체 코드 색상 및 깊이 지정
console.dir(dogObject, {color: false, depth:1});

필요한 상황에 따라 적절한 콘솔을 사용하면, 개발시간 단축이 가능합니다. 

 

시간 측정 콘솔

특정 코드의 시간 및 횟수 측정은 다음 코드로 확인할 수 있습니다.

//measuring time
console.time('for loop');
for (let i = 0;i < 10;i++){
    i++;
}
console.timeEnd('for loop');

//counting
let count = 0;
function a() {
    console.count('a function');
}
a();
a();
console.countReset('a function');//다시 0으로 카운트
a();

 

디버깅

 

개발자는 디버깅을 통해 현재코드와 원하는 코드의 갭(gap)을 줄여 나갑니다. 

콘솔을 통해 디버깅을 할 수도 있지만 인터프린트의 디버킹 기능을 사용할 수도 있습니다. 

 

다음에 계속..