이젠 console.log대신 console.debug하세요

들어가며

어느 날, 옆자리의 사수분께서 혹시라도 코드를 지우지 않았을 경우 모두에게 드러날 수 있으니

이제부터는 console.log보다는 console.debug를 사용하는게 좋겠다는 말씀을 하셨다.

 

 

[출처] 짱구

 

무의식적으로 console.log만 사용하던 사람 그게 바로 나에요

머쓱함은 접어두고 console과 조금 더 친해져보자

 

console의 주요 출력 메소드

console에서 가장 많이 활용하는 기능은 텍스트/데이터 출력이다.

코드의 결과가 의도대로 나오지 않을 때 단계별로 어떤 값이 리턴되는지 하나하나 console에 출력해본 경험은 누구에게나 있을 것. 

console 메세지는 중요도별로 출력 스타일이 다르고, 필터를 사용해 원하는 메세지만 볼 수도 있다.

 

Console의 필터 화면 (All levels) : Default로는 Info, Warnings, Errors 레벨에만 체크가 되어있다.

 

 

메세지의 중요도에 따라 출력 메서드는 아래로 분류된다.

 

• console.log() : 메세지 출력
• console.info() : 정보성 메세지 출력
• console.warn() : 경고 메세지 출력
• console.error() : 에러메세지 출력

chrome 환경에서의 console 출력 화면

 

 

참고로 메세지의 기본 스타일링은 브라우저마다 차이가 있다.

예를 들어 Firefox에선 console.info로 텍스트를 출력할 경우 메세지에  파란 i 아이콘이 함께 출력된다.

 

console.debug를 사용해야 하는 이유

위에 소개한 메서드 중 console.debug는 없었는데, 그럼 이는 무엇이고 왜 사용해야 할까?

 

console.debug는 '디버그' 중요도로 메세지를 출력하는 메소드로,

디버그 중요도의 메세지는 별도의 설정 없이는 console에 보이지 않는다.

 

 

Chrome의 경우 console에 Info, Warnings, Errors 레벨로 default 설정이 되어있어

사용자가 우연히 개발자도구를 키게된다고 해도 개발자가 console.debug로 출력한 데이터가 보이지 않는다.

메세지를 보기 위해선 Verbose Level에도 체크가 되어있어야 한다.

 

chrome의 console에서 보이지않는 debug 메세지

 

디버깅을 위해 작성했던 출력 메소드를 매번 완벽히 삭제한다면 괜찮지만
결국 사람이 하는 일이다보니 test, API 통신 후 받아온 결과값 등등의 출력 코드가 어쩌다 한 두개정도 남아있을 수도 있다. 

 

 

그렇게 배포까지 이어질 경우 실제 서비스에서 사용자의 console에 민망한 흔적을 남길 수도 있으므로

console.debug를 사용해 이를 미연에 방지하자.

---

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/console/debug

console.debug() - Web APIs | MDN