js의 console

이것저것 코딩을 하고 다른 언어를 배워보고싶어 파이썬을 배우기 시작했다.

강의를 보다보니 함수에 대해 나오기 시작했고 강의에서 그런 말을 했다.

print라는 함수에 담아서 복잡한 과정을 거쳐 보여주는것이라고..

파이썬에서는 print라는 함수로 보여주는데 내가 주로 사용하던 js에서는 console.log()를 이용해 자주 출력하고는 했다.

 

그런데 console이라는 객체에 담겨있는 console.log()함수

말고도 어떤 것들이 있을지 생각해본적이 크게 없었던 것 같다.

그래서 한 번 알아보려고 한다.

 

우선 종류를 보는것은 크게 어렵지 않았다.

개발자툴을 열고 콘솔창에 console 치면 나오게 된다.

내가 자주 사용해왔던 log도 보인다.

 

그리고 이들중 몇개를 알아보려고 한다.

 

콘솔 창 초기화 : clear

단어의 뜻 그대로 콘솔창에 입력된 모든 것을 초기화 시켜주게 된다.

만약 특정 시점부터의 디버깅이 필요한 경우에 해당 시점의 맨 앞에서 실행을 시켜주면 콘솔 확인이 편리해진다.

 

로그 레벨 : debug / info / warn / error

레벨로 구분된 로그 정도로 보면 된다. 기본적으로는 직관적 스타일이 적용된 로그를 볼 수 있다.

콘솔에 사이드바에서 각각의 레벨 별로 따로 확인도 가능하다.

console.debug('debug')
console.info('info')
console.warn('warn')
console.error('error')

 

카운트 체크 : count / countReset

어떤 이벤트 등의 실행 횟수를 체크하기 위해 굳이 따로 변수를 만들어 공유하지 않고 count를 사용해 간단하게 체크할 수 있다.

param으로는 라벨을 입력받을 수 있는데 비워두게 되면 'default'로 카운트가 된다.

 

초기화를 하고싶을때는 countReset을 사용하게 된다.

console.count('aa') // aa: 1
console.count() // default: 1
console.count('aa') // aa: 2
console.count('bb') // bb: 1
console.count('default') // default: 2
console.countReset('aa')
console.countReset('bb')
console.countReset()

 

시간 체크 : time / timeLog / timeEnd

시간체크가 정확할지 몰라 거의 사용하지는 않는다고 하지만 가끔 참고 정도로 사용할 때는 있다고 한다.

count와 마찬가지로 값을 넣어주지 않으면 default로 표시된다.

 

시간 체크를 시작하는 지점에 time

중간에 시간을 체크하고 싶은 시점에 timeLog

마무리 하고 싶을때 timeEnd

 

콘솔 출력의 그룹 : group / groupCollapsed / groupEnd

group은 console의 method들을 그룹화해주는 기능을 한다.

마찬가지로 값을 받아서 표시해줄 수 있다.

groupCollapsed를 사용하면 처음부터 그룹이 닫혀진 상태로 보여져서 더 깔끔하다.

 

console.group('myGroup')
console.groupEnd('myGroup')

console.groupCollapsed('myCollapsedGroup')
console.groupEnd('myCollapsedGroup')

 

데이터의 그리드화 : table

정제된 형태로 데이터를 확인하고 싶을때는 table을 사용하면 깔끔하게 확인할 수 있다.

구조가 복잡하지는 않지만 value 확인이 불편한 경우에 사용하면 좋을 것 같다.

console.table({
    test: 'a',
    test2: [1, 3, 5],
    test3: { name: 'test3' },
})

 

객체의 프로퍼티 확인 : dir

js object의 property 목록을 확인하고 싶을 때 사용한다고 한다.

 

 

호출 경로 추적 : trace

이를 사용하게 되면 trace가 호출된 시점까지 어떻게 함수가 호출 되었는지 역순으로 로그에 남게된다.

복잡한 프로젝트나 함수에서 사용하면 좋을 것 같다.

 

마무리로는

console에 대해 알아보았는데 여러가지 좋은 편리한것들이 있는 것 같다.

실제로 운영되는 사이트에서는 보통 console을 찍지 않으니 정리하는 습관도 함께 들이는게 좋을 것 같다.