크롬 console에 대한 모든 것
안녕하세요?
오늘은 크롬, 정확히는 크로미움 엔진에 있는 console 명령어에 대해 자세히 알아보겠습니다.
우리가 가장 많이 쓰는 명령어가 console.log() 명령어인데요.
사실 console 객체에는 console.log() 명령어 말고 여러 가지 메서드가 존재합니다.
크롬 검사창에서 console.log(console)이라고 쳐서 console 객체애 대해 출력하게 해 볼까요?
위 그림을 보시면 console 객체에는 여러 가지 메서드가 존재합니다.
그럼 대표적으로 몇 개만 살펴보겠습니다.
console.table
console.table() 메서드는 객체나 배열을 아주 보기 좋게 출력해 주는데요.
위 그림과 같이 아주 깔끔하게 표로 보여주고 있네요.
console.group()
console로 정보를 내보낼 때 그룹을 묶어서 표시할 수 있는데요.
group, groupCollapsed, groupEnd 메서드가 같은 종류의 명령어입니다.
다음 예를 보시면 쉽게 이해할 수 있을 겁니다.
Log에 스타일 꾸미기
console.log()에 CSS 스타일도 꾸밀 수 있는데요.
위와 같이 하면 좀 더 눈에 띄는 console.log()를 할 수 있을 겁니다.
console.time()
console 객체에는 time 메서드가 있는데요.
바로 벤치 테스트를 위해서 시간을 재는 명령어인데요.
이 time 메서드는 시작 부분을 나타내고 timeEnd() 메서드가 끝을 나타냅니다.
예를 들어 보는 게 가장 쉬울 거 같네요.
위 코드를 보시면 for 루프의 총 걸린 시간을 console.time()과 console.timeEnd() 메서드를 이용해서 구하고 있습니다.
console.assert()
console 객체에도 assert() 메서드가 있는데요.
이 메서드는 특별하게 첫 번째 인자가 false일 때만 두 번째 문자열이 출력되는 형태입니다.
그래서 에러가 발생한다고 가정하고 에러 메시지를 출력할 때 아주 요긴합니다.
console.count()
for 루프가 몇 번째 돌아가는지 쉽게 셀 수 있는 명령어가 바로 console.count() 메서드인데요.
참고로 중간에 count를 리셋하는 countReset() 메서드도 존재합니다.
console.trace()
이 메서드는 여러분이 컴포넌트가 아주 깊숙이 들어간 경우에 한번 써보시면 호출된 계층을 자세히 표시해 줄 겁니다.
또는 아주 어려운 함수 안에서도 호출해 보시면 이 함수까지 도달하는 계층을 쉽게 보여줄 겁니다.
console.dir()
console.table() 메서드와 함께 console.dir() 메서드도 객체나 배열을 볼 때 아주 쉽게 보여주는 메서드인데요.
특히 객체를 보여줄 때 효과적으로 각 항목을 확장, 축소할 수 있게끔 보여줘서, 디버그 할 때 아주 좋습니다.
console.debug()
이번에는 제가 그토록 찾던 메서드인데요.
우리가 코드를 짤 때 보통 console.log()로 디버깅 문자열을 출력하는데요.
production 모드로 배포할 때는 console.log()를 찾아서 다 주석 처리하는데요.
이걸 편하게 해 줍니다.
console.debug()로 출력하면 development 모드일 때는 출력이 되는데 production 모드일 때는 아무것도 출력하지 않습니다.
그래서 아주 유용한데요. 꼭 써보시기 바랍니다.
위 그림과 같이 크롬 검사창에서 console.debug() 했을 때 아무것도 출력되지 않았습니다.
크롬 검사창은 production 모드이기 때문이죠.
logging level
console.log()는 문자열을 보여준다는 의미인데요.
이 밖에도 info(), warn(), error() 메서드가 존재해서 로깅하는 레벨을 보여주곤 합니다.
위 그림을 보시면 Warn과 Error 부분이 눈에 확 들어오게끔 로깅을 해주고 있네요.
객체 여러 개를 출력할 때
console.log() 메서드로 객체 여러 개를 출력하는 방법입니다.
위와 같이 객체를 object deconstructing 방식으로 전달하면 됩니다.
로깅에도 Format 존재
C/C++에서 printf() 함수에 format이 존재하듯이 크로미움 console.log() 메서드에도 format이 존재합니다.
- %s - 문자열
- %d / %i - 정수
- %f - Float 실수
- %o - Use optimal formatting
- %O - Use default formatting
- %c - Use custom formatting
console.clear()
마지막으로 콘솔 창을 지우는 clear() 메서드가 존재합니다.
console.clear() 메서드를 실행하면 위 그림과 같이 콘솔이 클리어 됐다고 나옵니다.
지금까지 크롬, 크로미움의 console 객체에 대해 알아보았는데요.
여러 가지가 있으니까 꼭 상황에 맞게 사용하시면 될 거 같습니다.
그리고 아래 링크는 console 객체에서 우리가 다루지 못한 부분을 좀 더 상세히 설명해 주고 있으니 한번 읽어보시는 걸 추천드립니다.
그럼.