개발을 하다가 디버깅을 하기 위하여 console.log를 사용 합니다. 뭐 물론 console.log만을 사용하여 개발을 할 수도 있고, 틀린방향이 아닙니다. 하지만, 조금 더 편하게 개발을 해보자구요.
1. console.error / console.warn
이 정도는 다들 사용 하고 있는 함수들일 것 입니다. 뭐 물론 console.warn은 사용 빈도가 그렇게 많지는 않을 것 입니다. 그래도 에러가 나서 로그를 작성해야 하는 경우 console.error로 작성 해주는 것이 다른 개발자들 혹은 오래된 코드에서 문제가 발생한 것을 확실히 알 수 있게 해주어 오류를 파악하기 쉽기 때문에 매우 추천하는 바입니다.
2. console.time / console.timeEnd
만약에 이 함수를 모른다면 특정 코드가 얼마나 걸렸는지 확인을 하기 위하여 이렇게 사용 하였을 것 입니다.
뭐 물론 이렇게 하더라도 얼마나 오래 걸리는 함수를 확인하는 대에는 큰 문제가 없을 것 입니다.
하지만 위의 코드에는 두가지 문제가 있지요.
1. 1ms 미만으로 걸리는 작업에 대해서 확인이 불가능 하다.
2. startTime, endTime을 다른 개발자나 혹은 자기자신이 테스트를 하기위한 코드였는지 까먹는 것 입니다.
여기서 대안이 console.time / console.timeEnd 입니다.
3. console.table
데이터를 다루다 보면, 배열을 많이 다루게 됩니다.
console.table은 말처럼 배열과 같은 데이터를 table형태로 노출 시켜줍니다.
각각의 필드를 클릭하여 정렬도 가능하니, 데이터를 확인하는 것에도 꽤 편합니다.
4. console.trace
자바스크립트에서 함수는 일급객체입니다. 즉 다른 함수에 인자로 함수를 넣어서 호출을 하고 그 함수를 다른 함수에서 실행 하게 되었을 때, 어떠한 경로로 호출이 된 것인지 알 수가 없습니다. 간단한 예시를 보죠.
위와 같이 called testFunction을 일반 로그로 찍게 되면 어떤 과정으로 찍혀진 코드지인지 확인을 할 수가 없다. 이럴때 console.trace를 사용 할 수 있다.
위와 같이 outerFunction을 통해서 testfunction이 평가 되었구나 라고 확인 할 수 있다.
5. console.group / console.groupEnd
우리는 복잡한 코드를 짜다 보면, 거의 습관적으로 콘솔을 찍게 된다. 뭐 물론 그 행위를 나쁘게 볼 수 는 없지만, 무엇을 위한 콘솔이였는지, 이게 내가 찍은 콘솔인지 아니면 다른 개발자가 찍은 콘솔인지 점점 알 수 없게 되어 버린다.
이때 쓸 수 있는 방법이 console.group이다.
위처럼 console.group을 사용하게 되면 console.groupEnd가 호출 되기 전까지 실행 되었던 콘솔들을 들여쓰기 한것처럼 그륩화가 가능하다.
댓글
댓글 쓰기