Google Chrome의 자바스크립트 콘솔에 디버그 메시지를 출력하려면 console 객체가 제공하는 로깅 함수를 사용하면 됩니다. 다만 구형 브라우저처럼 콘솔 기능이 존재하지 않는 환경에서 오류가 발생하지 않도록, 먼저 콘솔 객체의 존재 여부를 확인하는 안전장치 코드를 작성하는 것이 좋습니다.
콘솔 미지원 환경을 위한 안전장치 코드
아래 스크립트는 브라우저에 콘솔 기능이 없을 경우 빈 객체와 함수를 대신 정의하여 오류 없이 실행되도록 만들어 줍니다.
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};이 코드는 window.console이 존재하지 않으면 빈 객체를 생성하고, 각 로깅 함수가 정의되어 있지 않다면 아무 동작도 하지 않는 빈 함수로 대체합니다. 덕분에 콘솔을 지원하지 않는 환경에서도 스크립트가 중단되지 않습니다.
Chrome 콘솔에서 사용할 수 있는 주요 함수
Google Chrome 콘솔에서는 목적에 따라 다음 세 가지 함수를 활용할 수 있습니다.
console.log(); console.warn(); console.error();
- console.log(): 일반적인 로그 정보를 출력할 때 사용합니다. 변수 값 확인, 코드 흐름 추적 등 디버깅의 기본 도구입니다.
- console.warn(): 경고 메시지를 표시할 때 사용합니다. 출력 결과는 노란색 배경의 경고 아이콘과 함께 나타나 눈에 잘 띕니다.
- console.error(): 오류 메시지를 표시할 때 사용합니다. 빨간색으로 강조되어 문제 상황을 즉시 인지할 수 있습니다.
Console 객체란?
Console 객체는 브라우저의 디버깅 콘솔에 접근하기 위한 표준 인터페이스입니다. Firefox의 웹 콘솔(Web Console)처럼 각 브라우저마다 고유한 개발자 콘솔을 제공하며, 이 객체를 통해 개발자는 실행 중인 웹 페이지의 내부 상태를 손쉽게 확인하고 분석할 수 있습니다.
Chrome에서 콘솔을 열려면 F12 키를 누르거나, 마우스 우클릭 후 '검사(Inspect)'를 선택한 다음 Console 탭으로 이동하면 됩니다. 이곳에서 위의 함수들을 직접 입력해 결과를 실시간으로 확인해 보세요.