console
console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공합니다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.
console 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 Window, 워커에서는 WorkerGlobalScope (en-US)이 속성으로 포함하고 있습니다. Window.console의 형태로 노출되어 있으므로 간단하게 console로 참조할 수 있습니다.
console.log("링크를 열 수 없습니다");
이 문서는 콘솔 객체에서 사용할 수 있는 메서드와 몇 가지 예제를 다룹니다.
참고: 이 기능은 Web Worker에서 사용할 수 있습니다.
메서드
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()(en-US)-
정보 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
console.log()-
일반 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
console.profile()(en-US)-
브라우저의 내장 프로파일러(Firefox 성능 측정 도구 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.
console.profileEnd()(en-US)-
프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구(Firefox 성능 측정 도구 등)에서 확인할 수 있습니다.
console.table()-
표 형태의 데이터를 표에 그립니다.
console.time()-
주어진 이름의 타이머를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.
console.timeEnd()-
지정한 타이머를 멈추고, 소요시간을 출력합니다.
console.timeStamp()(en-US) 비표준-
브라우저의 타임라인이나 워터폴 (en-US)에 마커를 추가합니다.
console.trace()-
스택 추적을 출력합니다.
console.warn()-
경고 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
예제
콘솔에 텍스트 출력하기
콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 console.log(), console.info() (en-US), 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.
콘솔 출력 꾸미기
"%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 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)
background와 그 본디 속성.border와 그 본디 속성.border-radiusbox-decoration-break(en-US)box-shadow(en-US)clear,floatcolorcursordisplay(en-US)font와 그 본디 속성.line-height(en-US)marginoutline과 그 본디 속성.paddingtext-transform(en-US) 등text-*속성.white-spaceword-spacing,word-breakwriting-mode(en-US)
참고: 콘솔 메시지는 인라인 요소처럼 행동합니다. 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");
위의 출력은 다음과 같습니다.
타이머
특정 작업의 소요시간을 측정할 땐 타이머를 사용할 수 있습니다. 타이머를 시작하려면 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");
위의 코드는 사용자가 경고 상자를 닫는데 걸린 시간을 기록한 후 출력하고, 두 번째 경고를 닫을 때까지 기다린 후, 총 걸린 시간을 출력합니다.
시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.
참고: 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다. 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.
스택 추적
콘솔 객체는 스택 추적도 지원합니다. 스택 추적은 console.trace()를 호출하게 된 경로를 보입니다. 예를 들어...
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
위 코드의 출력 결과는 다음과 같습니다.
명세
| Specification |
|---|
| Console Standard # console-namespace |
브라우저 호환성
BCD tables only load in the browser
참고
- 적어도 Firefox에서는 페이지가
console객체를 정의하면 해당 객체가 Firefox에 내장된 객체를 재정의합니다.
같이 보기
- Firefox 개발자 도구
- 웹 콘솔: Firefox의 웹 콘솔이 콘솔 API 호출을 처리하는 방법
- 원격 디버깅: 디버깅 대상이 모바일 장치일 때 콘솔 출력을 보는 방법