개발 및 디버깅 단계에서 정말 많이 사용하는 것이 바로 콘솔 로그입니다.
콘솔 로그를 활용하는 방법들에 대해 살펴보겠습니다.
1. console.log ( 출력하기 )
기본적인 출력 기능입니다.
많은 분들이 console.log()는 잘 알고 계시고 사용하고 계시지만
그 외에도 등급별로 다른 출력 기능이 있습니다.
사용해보시면 구문 별로 색상이 다르게 출력됩니다.
// log level
console.log('log') // 출력
console.info('info') // 정보
console.warn('warn') // 경보
console.error('error')) // 에러
2. console.assert ( 조건이 참일 때만 출력하기 )
내가 원하는 특정 조건이 맞을 때만 출력하는 방법입니다.
console.assert(1 === 1, '1===1 same');
console.assert(1 === 2, '1===2 same');1 === 1이 참인 조건이기에 첫 번째 문만 출력됩니다.
3. console.table , console.dir ( Object 출력하기 )
Object를 출력할 때는 기본적으로 console.log로 사용도 하지만
한눈에 보기 쉽게 출력할 때는 console.table을 사용하면
Object 가 테이블 형태로 출력되어 훨씬 보기 쉽습니다.
또 console.dir 이 있는데요~
console.log 와 동일하지만 여러 가지 옵션을 설정할 수 있습니다.
대표적으로 아래 문처럼 depth 를지정하면 오브젝트 하위 오브젝트를
depth에 해당하는 만큼 함께 출력 가능합니다.
console.log(obj)
console.table(obj)
console.dir(obj, {colors: false, depth: 1});
4. console.time ( 시간 측정하기 )
console 에는 시간을 측정하는 기능도 있습니다.
console.time 과 console.timeEnd인데요
아래와 같이 사용합니다.
console.time('time1');
console.time('time2');
for (let i = 0; i < 10; i++) {
}
console.timeEnd('time1'); // console.time('time1') 이 선언된 시간부터 지금까지 걸린시간을 출력
for (let j = 0; j < 100; j++) {
}
console.timeEnd('time2'); // console.time('time2') 이 선언된 시간부터 지금까지 걸린시간을 출력
5. console.count ( 카운팅 하기 )
console에서는 카운팅 기능도 제공하고 있습니다.
console.count로 카운팅을 할 수 있고 console.countReset으로 초기화합니다.
아래 예제를 살펴보겠습니다.
function count() {
console.count('how many times function count is called?');
}
count(); // how many times function count is called? : 1
count(); // how many times function count is called? : 2
count(); // how many times function count is called? : 3
console.countReset('how many times function count is called?'); // 카운트 초기화기능
count(); // how many times function count is called? : 1
count(); // how many times function count is called? : 2
6. console.trace ( 호출 경로 파악하기 )
console.trace 를통해 호출 경로를 출력할 수 있습니다.
function func1() {
func2();
}
function func2() {
func3();
}
function func3() {
console.trace();
}
func1();
/*
at func3 (/User/temp.js:32:11)
at func2 (/User/temp.js:29:3)
at func1 (/User/temp.js:26:3)
at Object......
*/
위 코드를 실행하면 func3, 2, 1 순서대로 호출된 곳을 출력해줍니다.
알아두시면 디버깅 시 굉장히 유용하게 사용할 수 있을 것 같습니다.