console

console

console 객체는 디버깅 콘솔(예: Firefox의 Web console)에 접근할 수 있게 해 준다. 이 기능은 Web Workers에서도 사용 가능하다.

출처: console - Web APIs | MDN

본문

개요

console API의 구현은 런타임에 따라 다를 수 있다. 특히 일부 console 메서드는 일부 온라인 편집기와 IDE에서 다르게 동작하거나 전혀 동작하지 않을 수 있다. 이 문서에서 설명하는 동작을 보려면 브라우저의 개발자 도구에서 메서드를 시도해 보라. 다만 여기에서도 브라우저 간 차이가 있다.

console 객체는 어떤 전역 스코프에서든 사용 가능하다. 예를 들어:

console.log("Failed to open the specified link");

인스턴스 메서드(Instance methods)

  • console.assert() — 첫 번째 인자가 false이면 콘솔에 오류 메시지를 기록한다.
  • console.clear() — 콘솔을 비운다.
  • console.count() — 주어진 라벨로 이 줄이 호출된 횟수를 기록한다.
  • console.countReset() — 주어진 라벨의 카운터 값을 재설정한다.
  • console.debug() — debug 로그 레벨로 메시지를 콘솔에 출력한다.
  • console.dir() — 지정된 JavaScript 객체의 속성에 대한 대화형 목록을 표시한다. 이 목록을 통해 공개 삼각형(disclosure triangles)을 사용해 자식 객체의 내용을 조사할 수 있다.
  • console.dirxml() — 가능하면 지정된 객체의 XML/HTML 요소 표현을, 불가능하면 JavaScript 객체 뷰를 표시한다.
  • console.error() — error 로그 레벨로 메시지를 콘솔에 출력한다.
  • console.exception() — console.error()의 별칭.
  • console.group() — 새 인라인 그룹을 만들어 이후 모든 출력을 한 단계 더 들여쓴다. 한 단계 나오려면 console.groupEnd()를 호출한다.
  • console.groupCollapsed() — 새 인라인 그룹을 만들어 이후 모든 출력을 한 단계 더 들여쓴다. 하지만 console.group()과 달리 인라인 그룹이 접힌 상태로 시작하므로 펼치려면 공개 버튼을 사용해야 한다. 한 단계 나오려면 console.groupEnd()를 호출한다.
  • console.groupEnd() — 현재 인라인 그룹을 종료한다.
  • console.info() — info 로그 레벨로 메시지를 콘솔에 출력한다.
  • console.log() — 메시지를 콘솔에 출력한다.
  • console.profile() — 브라우저의 내장 프로파일러(예: Firefox 성능 도구)를 시작한다. 프로파일에 선택적 이름을 지정할 수 있다.
  • console.profileEnd() — 프로파일러를 중지한다. 결과 프로파일은 브라우저의 성능 도구(예: Firefox 성능 도구)에서 볼 수 있다.
  • console.table() — 표 형식 데이터를 표로 표시한다.
  • console.time() — 입력 파라미터로 지정된 이름으로 타이머를 시작한다. 한 페이지에서 최대 10,000개의 동시 타이머를 실행할 수 있다.
  • console.timeEnd() — 지정된 타이머를 중지하고 시작 이후 경과 시간을 밀리초 단위로 기록한다.
  • console.timeLog() — 지정된 타이머의 값을 콘솔에 기록한다.
  • console.timeStamp() — 브라우저 성능 도구의 타임라인(Chrome 또는 Firefox)에 마커를 추가한다.
  • console.trace() — 스택 트레이스(stack trace)를 출력한다.
  • console.warn() — warning 로그 레벨로 메시지를 콘솔에 출력한다.

예제

콘솔에 텍스트 출력하기

콘솔의 가장 자주 사용되는 기능은 텍스트와 기타 데이터를 기록하는 것이다. console.log(), console.info(), console.warn(), console.error(), console.debug() 메서드를 사용해 생성할 수 있는 몇 가지 출력 범주가 있다. 각각 로그에서 다르게 스타일링된 출력을 만들며, 브라우저가 제공하는 필터링 컨트롤을 사용해 관심 있는 종류의 출력만 볼 수 있다.

각 출력 메서드를 사용하는 방법은 두 가지이다:

  • 가변 인자를 전달해 그 문자열 표현을 하나의 문자열로 연결한 뒤 콘솔에 출력한다.
  • 0개 이상의 치환 문자열(substitution strings)을 포함한 문자열을 전달하고, 그 뒤에 치환할 가변 인자들을 전달한다.

단일 객체 출력하기

로깅 메서드를 사용하는 가장 간단한 방법은 단일 객체를 출력하는 것이다:

const someObject = { str: "Some text", id: 5 };
console.log(someObject);

출력은 다음과 같다:

{str:"Some text", id:5}

브라우저는 객체에 대해 가능하고 원하는 만큼 많은 정보를 표시한다. 예를 들어 객체의 private 상태도 표시될 수 있다. DOM 요소나 함수 같은 특정 타입의 객체는 특별한 방식으로 표시될 수도 있다.

객체 스냅샷 찍기(Snapshotting objects)

객체에 대한 정보는 지연(lazily) 검색된다. 즉 로그 메시지는 객체가 기록될 때가 아니라 처음 볼 때의 객체 내용을 보여 준다는 뜻이다. 예를 들어:

const obj = {};
console.log(obj);
obj.prop = 123;

이 코드는 {}를 출력한다. 하지만 객체의 세부 정보를 펼치면 prop: 123을 볼 수 있다.

객체를 수정할 계획이고 기록된 정보가 갱신되는 것을 막으려면 로그 전에 객체를 깊은 복제(deep-clone)하면 된다. 흔한 방법은 JSON.stringify() 후 JSON.parse() 하는 것이다:

console.log(JSON.parse(JSON.stringify(obj)));

브라우저에서 동작하는 다른 대안들도 있다. 예를 들어 structuredClone()은 다양한 타입의 객체를 복제하는 데 더 효과적이다.

여러 객체 출력하기

로깅 메서드를 호출할 때 여러 객체를 나열해서 출력할 수도 있다:

const car = "Dodge Charger";
const someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

출력은 다음과 같다:

My first car was a Dodge Charger . The object is: {str:"Some text", id:5}

문자열 치환 사용하기

로깅 메서드의 첫 번째 파라미터는 0개 이상의 치환 문자열을 포함한 문자열일 수 있다. 각 치환 문자열은 해당 인자 값으로 대체된다.

  • %o — JavaScript 객체를 "최적으로 유용한 형식(optimally useful formatting)"으로 출력한다. 예를 들어 DOM 요소는 요소 검사기(inspector)에서 나타나는 것과 같은 방식으로 표시될 수 있다.
  • %O — JavaScript 객체를 "일반 JavaScript 객체 형식(generic JavaScript object formatting)"으로 출력한다. 보통 펼칠 수 있는 트리 형태이다. console.dir()과 유사하다.
  • %d 또는 %i — 정수로 출력한다.
  • %s — 문자열로 출력한다.
  • %f — 부동소수점 값으로 출력한다.
  • %c — 이후의 모든 텍스트에 CSS 스타일 규칙을 적용한다. "Styling console output" 참고.

일부 브라우저는 추가 포맷 지정자를 구현할 수도 있다. 예를 들어 Safari와 Firefox는 C 스타일 정밀도 형식 %.<precision>f를 지원한다. 예를 들어 console.log("Foo %.2f", 1.1)는 소수점 둘째 자리까지 숫자를 출력한다: Foo 1.10. 반면 console.log("Foo %.2d", 1.1)는 앞에 0이 붙은 두 자리 유효 숫자로 출력한다: Foo 01.

각각은 형식 문자열 뒤의 다음 인자를 파라미터 목록에서 가져온다. 예를 들어:

for (let i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}

출력은 다음과 같다:

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
Hello, Bob. You've called me 5 times.

콘솔 출력 스타일링하기(Styling console output)

%c 지시자를 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있다:

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

지시자 앞의 텍스트는 영향받지 않지만, 지시자 뒤의 텍스트는 파라미터의 CSS 선언을 사용해 스타일링된다.

%c를 여러 번 사용할 수도 있다:

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

%c 문법과 함께 사용할 수 있는 속성은 다음과 같다(최소한 Firefox에서 — 다른 브라우저에서는 다를 수 있음): background와 그 longhand, border와 그 longhand, border-radius, box-decoration-break, box-shadow, clear와 float, color, cursor, display, font와 그 longhand, line-height, margin, outline과 그 longhand, padding, text-transform 같은 text-* 속성, white-space, word-spacing과 word-break, writing-mode.

참고: 각 콘솔 메시지는 기본적으로 인라인 요소처럼 동작한다. padding, margin 같은 속성이 효과를 가지려면 display 속성을 display: inline-block으로 설정하면 된다.

참고: 밝은 색과 어두운 색 구성 모두를 지원하려면 색을 지정할 때 light-dark()를 사용할 수 있다. 예: color: light-dark(#D00000, #FF4040);

콘솔에서 그룹 사용하기

관련 자료를 시각적으로 결합해 출력을 구성하려면 중첩 그룹을 사용할 수 있다. 새 중첩 블록을 만들려면 console.group()을 호출한다. console.groupCollapsed() 메서드는 비슷하지만 새 블록을 접힌 상태로 만들어 읽으려면 공개 버튼을 사용해야 한다.

현재 그룹을 종료하려면 console.groupEnd()를 호출한다. 예를 들어 다음 코드를 보자:

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

타이머(Timers)

특정 연산의 지속 시간을 계산할 타이머를 시작할 수 있다. 타이머를 시작하려면 console.time() 메서드를 호출하고 유일한 파라미터로 이름을 준다. 타이머를 중지하고 밀리초 단위 경과 시간을 얻으려면 console.timeEnd() 메서드를 호출하며 역시 타이머 이름을 파라미터로 전달한다. 한 페이지에서 최대 10,000개의 타이머가 동시에 실행될 수 있다.

예를 들어 다음 코드를 보자:

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");

이 코드는 사용자가 경고 상자를 닫는 데 걸린 시간을 기록하고, 콘솔에 시간을 기록한 뒤, 두 번째 경고를 사용자가 닫을 때까지 기다린 후 종료 시간을 콘솔에 기록한다.

타이머 이름은 타이머가 시작될 때와 중지될 때 모두 표시된다는 점을 주목하라.

스택 트레이스(Stack traces)

console 객체는 스택 트레이스 출력도 지원한다. 이는 console.trace()를 호출한 지점에 도달하기까지 거쳐 온 호출 경로를 보여 준다. 다음과 같은 코드를 보자:

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

명세(Specifications)

  • Console — console-namespace

브라우저 호환성

baseline 기준 2015년 7월부터 널리 사용 가능하다. 호환성 표는 JavaScript를 활성화해야 볼 수 있다.

참고 자료

  • Firefox Developer Tools
  • Web console — Firefox의 Web console이 console API 호출을 처리하는 방법
  • about:debugging — 디버깅 대상이 모바일 장치일 때 console 출력을 보는 방법
  • Google Chrome DevTools
  • Microsoft Edge DevTools
  • Safari Web Inspector

더 알아보기