console
=======

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

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


```js
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()` 메서드를 사용해 출력할 수 있습니다. 중요도 별로 출력 스타일이 조금씩 다르며, 중요도 필터를 사용해 원하는 메시지만 골라 볼 수도 있습니다.

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

#### 단일 객체 출력하기

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


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


출력은 다음과 같습니다.


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


#### 여러 객체 출력하기

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


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


출력은 다음과 같습니다.


```bash
[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은 숫자 서식을 지원하지 않습니다

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


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


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


```bash
[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 스타일을 적용할 수 있습니다.


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


명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.

![](/ko/docs/Web/API/console/css-styling.png)

`"%c"` 명령을 여러 번 사용할 수도 있습니다.


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


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

* `background`와 그 본디 속성.
* `border`와 그 본디 속성.
* `border-radius`
* `box-decoration-break` (en-US)
* `box-shadow` (en-US)
* `clear`, `float`
* `color`
* `cursor`
* `display` (en-US)
* `font`와 그 본디 속성.
* `line-height` (en-US)
* `margin`
* `outline`과 그 본디 속성.
* `padding`
* `text-transform` (en-US) 등 `text-*` 속성.
* `white-space`
* `word-spacing`, `word-break`
* `writing-mode` (en-US)

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

### 콘솔 그룹 사용하기

중첩 그룹을 사용하면 서로 관련된 출력 결과를 시각적으로 묶어 정돈할 수 있습니다. 새로운 중첩 블록을 생성하려면 `console.group()`을 호출하세요. `console.groupCollapsed()` 메서드도 유사하지만, 대신 새로운 블록을 접힌 채로 생성하므로 내부를 보려면 열어야 합니다.

현재 그룹에서 나가려면 `console.groupEnd()`를 호출하세요. 예를 들어...


```js
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](/ko/docs/Web/API/console/console_groups_demo.png)

### 타이머

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

예를 들어...


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


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

![](/ko/docs/Web/API/console/console-timelog.png)

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

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


### 스택 추적

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


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

foo();
```


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

![](/ko/docs/Web/API/console/api-trace2.png)

명세
--

| Specification |
| --- |
| Console Standard # console-namespace |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참고
--

* 적어도 Firefox에서는 페이지가 `console` 객체를 정의하면 해당 객체가 Firefox에 내장된 객체를 재정의합니다.
같이 보기
-----

* Firefox 개발자 도구
* 웹 콘솔: Firefox의 웹 콘솔이 콘솔 API 호출을 처리하는 방법
* 원격 디버깅: 디버깅 대상이 모바일 장치일 때 콘솔 출력을 보는 방법
### 다른 구현체

* Google Chrome 개발자 도구
* Microsoft Edge 개발자 도구
* Safari Web Inspector