console

console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공합니다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.

console 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 Window, 워커에서는 WorkerGlobalScope이 속성으로 포함하고 있습니다. Window.console의 형태로 노출되어 있으므로 간단하게 console로 참조할 수 있습니다.

console.log("링크를 열 수 없습니다")

이 문서는 콘솔 객체에서 사용할 수 있는 메서드와 몇 가지 예제를 다룹니다.

주의: 이 기능은 Web Worker에서 사용할 수 있습니다.

참고: 실제 console 인터페이스는 역사적 이유로 인해 모두 소문자(즉 Console이 아니고 console)입니다.

메서드

console.assert()
첫 번째 매개변수가 false인 경우 메시지와 스택 추적을 출력합니다.
console.clear()
콘솔의 내용을 지웁니다.
console.count()
주어진 레이블로 메서드를 호출한 횟수를 출력합니다.
console.countReset()
주어진 라벨의 횟수를 초기화합니다.
console.debug()
"debug" 중요도로 메시지를 출력합니다.
console.dir()
주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.
console.dirxml()

객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.

console.error()
오류 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
console.exception()
error()의 별칭입니다.
console.group()
새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 groupEnd()를 호출하세요.
console.groupCollapsed()
새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그러나 group()과 달리, groupCollapsed()로 생성한 그룹은 처음에 접혀 있습니다. 그룹을 나오려면 groupEnd()를 호출하세요.
console.groupEnd()
현재 인라인 그룹을 나옵니다.
console.info()
정보 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
console.log()
일반 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
console.profile()
브라우저의 내장 프로파일러(Firefox 성능 측정 도구 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.
console.profileEnd()
프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구(Firefox 성능 측정 도구 등)에서 확인할 수 있습니다.
console.table()
표 형태의 데이터를 표에 그립니다.
console.time()
주어진 이름의 타이머를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.
console.timeEnd()
지정한 타이머를 멈추고, 소요시간을 출력합니다.
console.timeStamp()
브라우저의 타임라인이나 워터폴에 마커를 추가합니다.
console.trace()
스택 추적을 출력합니다.
console.warn()
경고 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.

예제

콘솔에 텍스트 출력하기

콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 console.log(), console.info(), console.warn(), console.error() 메서드를 사용해 출력할 수 있습니다. 중요도 별로 출력 스타일이 조금씩 다르며, 중요도 필터를 사용해 원하는 메시지만 골라 볼 수도 있습니다.

각각의 출력 메서드는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 단순히 객체 목록을 제공하는 것으로, 각자의 문자열 표현이 하나로 합쳐져서 출력됩니다. 두 번째는 치환 문자열을 포함한 문자열 뒤에, 그 자리에 배치할 객체 목록을 제공하는 것입니다.

단일 객체 출력하기

로그를 남기는 가장 간단한 방법은 하나의 객체를 출력하는 것입니다.

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

출력은 다음과 같습니다.

[09:27:13.475] ({str:"Some text", id:5})

여러 객체 출력하기

여러 객체를 출력하는 방법은 메서드를 호출할 때 모두 나열하면 됩니다.

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

출력은 다음과 같습니다.

[09:28:22.711] My first car was a Dodge Charger. The object is: ({str:"Some text", id:5})

문자열 치환

log()처럼 문자열을 받는 콘솔 메서드에는 아래의 치환 문자열을 제공할 수 있습니다.

치환 문자열 설명
%o 또는 %O JavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.
%d 또는 %i 정수를 출력합니다. 서식도 지원합니다. 예를 들어 console.log("Foo %.2d", "1.1")은 정수부를 0이 앞서는 두 자리로 표현하므로 Foo 01을 출력합니다.
%s 문자열을 출력합니다.
%f 부동소수점 수를 출력합니다. 서식도 지원합니다. 예를 들어 console.log("Foo %.2f", "1.1")은 소수부를 두 자리로 표현하므로 Foo 1.10을 출력합니다.

참고: Chrome은 숫자 서식을 지원하지 않습니다.

각각의 치환 문자열은 이후 매개변수에서 값을 가져옵니다. 예를 들어...

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

위의 출력은 다음과 같습니다.

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

console 출력 꾸미기

"%c" 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.

%c 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)

참고: 콘솔 메시지는 인라인 요소처럼 행동합니다. padding, margin등의 효과를 보려면 display: inline-block 등을 지정해야 합니다.

콘솔 그룹 사용하기

중첩 그룹을 사용하면 서로 관련된 출력 결과를 시각적으로 묶어 정돈할 수 있습니다. 새로운 중첩 블록을 생성하려면 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");

위의 출력은 다음과 같습니다.

Demo of nested groups in Firefox console

타이머

특정 작업의 소요시간을 측정할 땐 타이머를 사용할 수 있습니다. 타이머를 시작하려면 console.time() 메서드를 호출하세요. 유일한 매개변수로 타이머의 이름을 제공할 수 있습니다. 타이머를 멈추고, 시작한 후 지난 시간을 알아내려면 console.timeEnd() 메서드를 호출하세요. 역시, 유일한 매개변수로 이전에 사용한 타이머 이름을 제공하면 됩니다.

예를 들어...

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

위의 코드는 사용자가 경고 상자를 닫는데 걸린 시간을 기록한 후 출력하고, 두 번째 경고를 닫을 때까지 기다린 후, 총 걸린 시간을 출력합니다.

timerresult.png

시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.

참고: 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다. 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.

스택 추적

콘솔 객체는 스택 추적도 지원합니다. 스택 추적은 console.trace()를 호출하게 된 경로를 보입니다. 예를 들어...

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

foo();

위 코드의 출력 결과는 다음과 같습니다.

명세

Specification Status Comment
Console API Living Standard Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ConsoleChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 8
Notes
Full support 8
Notes
Notes In Internet Explorer 8 and 9, the console object is undefined when the developer tools are not open. This behavior was fixed in Internet Explorer 10.
Opera Full support 10.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
assertChrome Full support 1Edge Full support 12Firefox Full support 28IE Full support 8Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 28Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
clearChrome Full support 25Edge Full support 12Firefox Full support 39IE Full support 8Opera Full support 12Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 39Opera Android Full support 12Safari iOS Full support 7Samsung Internet Android Full support 1.5
countChrome Full support 1Edge Full support 12Firefox Full support 30IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 30Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
countResetChrome Full support 68Edge Full support 79Firefox Full support 62IE No support NoOpera Full support 55Safari Full support 13WebView Android Full support 68Chrome Android Full support 68Firefox Android Full support 62Opera Android Full support 48Safari iOS Full support 13Samsung Internet Android Full support 10.0
debugChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
dir
Experimental
Chrome Full support 1Edge Full support 12Firefox Full support 8IE Full support 9Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 8Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
dirxml
Experimental
Chrome Full support 1Edge Full support 12Firefox Full support 39IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 39Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
errorChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 8Opera Full support 10.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
exception (an alias for error)
DeprecatedNon-standard
Chrome No support NoEdge No support 13 — 79Firefox Full support 28IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 28Opera Android ? Safari iOS No support NoSamsung Internet Android No support No
groupChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
groupCollapsedChrome Full support 6Edge Full support 12Firefox Full support 9IE Full support 11Opera Full support 11Safari Full support 5.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 9Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
groupEndChrome Full support 1Edge Full support 12Firefox Full support 9IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 9Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
infoChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 8Opera Full support 10.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
logChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 8Opera Full support 10.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
profile
ExperimentalNon-standard
Chrome Full support 4Edge Full support 12Firefox Full support 16IE Full support 9Opera Full support 11Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
profileEnd
ExperimentalNon-standard
Chrome Full support 4Edge Full support 12Firefox Full support 16IE Full support 9Opera Full support 11Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
tableChrome Full support 27Edge Full support 13Firefox Full support 34IE No support NoOpera Full support 11Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 34Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support 1.5
timeChrome Full support 1Edge Full support 12Firefox Full support 10IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
timeEndChrome Full support 1Edge Full support 12Firefox Full support 10IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
timeLogChrome Full support 71Edge Full support 79Firefox Full support 62IE No support NoOpera Full support 60Safari Full support 13WebView Android Full support 71Chrome Android Full support 71Firefox Android Full support 62Opera Android Full support 50Safari iOS Full support 13Samsung Internet Android Full support 10.0
timeStamp
ExperimentalNon-standard
Chrome Full support 14Edge Full support 12Firefox Full support 39IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 39Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.0
traceChrome Full support 1Edge Full support 12Firefox Full support 10IE Full support 11Opera Full support 11Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
warnChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 8Opera Full support 10.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
Available in workersChrome Full support YesEdge Full support 12Firefox Full support 38IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 38Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기

다른 구현체