자바스크립트 로그 찍기
자바스크립트로 개발하다 보면 로그를 봐야 할 때가 있습니다. 이때 로그를 브라우저 콘솔로 쉽게 출력할 있는 방법이 있어 소개하겠습니다. 결과 확인이나 디버깅 용도로도 흔히 쓰이는 매소드이니 알아두면 개발하는데 많은 도움이 될 것입니다. 자바로 따지면 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()를 활용하면 됩니다.
콘솔에 값(변수)을 출력하고 싶은 경우는 아래와 같이 사용하면 됩니다.
끝~! ㅎㅎ
'[개발] Programming > Javascript' 카테고리의 다른 글
자바스크립트 Uncaught SyntaxError: missing ) after argument list 오류 해결 (0) | 2021.12.09 |
---|---|
자바스크립트 노드(태그) 리스트 조회하는 함수 - querySelectorAll() (0) | 2021.07.27 |
자바스크립트, 태그에 이벤트 함수 바인딩하기 - addEventListener() (0) | 2021.07.25 |
자바스크립트 document.getElementById() - id로 dom 요소 찾기 (0) | 2021.07.20 |
마우스 스크롤 시 실행되는 jQuery 함수 - window scroll (0) | 2021.03.20 |
댓글