본문 바로가기
[개발] Programming/Javascript

자바스크립트 로그 찍기 : console.log (콘솔 디버깅)

by eatyourKimchi 2022. 12. 8.

 

 

 

 

자바스크립트 로그 찍기

 

 자바스크립트로 개발하다 보면 로그를 봐야 할 때가 있습니다. 이때 로그를 브라우저 콘솔로 쉽게 출력할 있는 방법이 있어 소개하겠습니다. 결과 확인이나 디버깅 용도로도 흔히 쓰이는 매소드이니 알아두면 개발하는데 많은 도움이 될 것입니다. 자바로 따지면 system.out 과 같은 기능을 합니다.

 

 

 

자바스크립트 console 객체

 

자바스크립트의 console 객체는 당양한 메소드를 지원합니다.

그중에서 디버깅이나 로그 출력을 위한 메소드는 아래와 같습니다.

 

 

* 함수 사용 방법

  console.debug(" 출력 문자나 숫자 ");

  console.error(" 출력 문자나 숫자 ");

  console.info(" 출력할 문자나 숫자 ");

  console.log(" 출력 문자나 숫자 ");

  console.warn(" 출력 문자나 숫자 "); 

 

 

참고로 디버그는 브라우저 설정에 따라 출력 안되는 경우도 있습니다.

브라우저에 따라 설정을 변경하면 출력 가능합니다.

 

실제로 위 함수를 출력해보면 아래와 같이 결과를 볼 수 있습니다.

참고로 브라우저의 콘솔은 f12를 누르면 뜹니다.

 

 

 

 

자바스크립트 console 사용 예시

 

사실 5개 메소드의 기능은 콘솔 출력으로 거의 동일합니다.

다만 브라우저 콘솔에 노출되는 방식은 조금 다릅니다.

 

예를 들어 log 나 info는 그냥 출력되는 반면, warn 이나 error는 하이라이트 되어 있습니다.

때문에 익셉션이나 오류를 잘 보이게 표시하고 싶을 때 console.warn(), console.error()를 활용하면 됩니다.

 

 

 

콘솔에 값(변수)을 출력하고 싶은 경우는 아래와 같이 사용하면 됩니다.

 

 

 

끝~! ㅎㅎ

 

댓글