Console

이 글은 편집 검토가 필요합니다. 도울을 줄 수 있는 방법을 살펴보세요.

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

콘솔 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다. (예를 들어, 파이어폭스의 웹 콘솔). 어떻게 동작하는지에 관한 세부 내용은 브라우저마다 다르지만, 사실상 표준의 일반적으로 지원하는 기능들이 있다.

The Console object can be accessed from any global object, Window on browsing scopes, WorkerGlobalScope, and its specific variants in workers via property console.

이 문서에서는 콘솔 객체에서 사용할 수 있는 메소드(Methods)들과 몇 가지 사용 예제(Usage)들을 다룬다.

주의: This feature is available in Web Workers.

Methods

Console.assert()
첫 번째 인자가 false인 경우 로그 메시지와 스택 트레이스를 콘솔에 출력한다.
Console.clear()
콘솔에 기록된 내용들을 지운다.
Console.count()
이 메소드가 호출된 횟수를 기록한다. 라벨을 지정할 수 있다.
Console.debug()
log();의 동의어(alias) 이다.
Console.dir()
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
Console.dirxml()

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.

Console.error()
에러 메시지를 출력한다. 문자열 치환(string substitution)과 추가 인자를 사용할 수 있다.
Console._exception()
error();의 동의어 이다.
Console.group()
group을 생성하여 레벨별로 출력을 들여쓰기 한다. 들여쓰기 레벨을 다시 줄이려면 groupEnd()를 호출한다.
Console.groupCollapsed()
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
Console.groupEnd()
Exits the current inline group.
Console.info()
Informative logging information. You may use string substitution and additional arguments with this method.
Console.log()
일반적인 로그를 출력한다. 문자열 치환(string substitution)과 추가 인자를 사용 할 수 있다.
Console.profile()
브라우저의 내장 프로파일러(예를 들어, Firefox performance tool)를 실행한다. 선택적으로 프로파일러에 이름을 지정할 수 있다.
Console.profileEnd()
프로파일러의 실행을 중지한다. 프로파일링의 결과는 브라우저의 성능 툴(예를 들어, Firefox performance tool)에서 볼 수 있다.
Console.table()
Displays tabular data as a table.
Console.time()
지정된 이름으로 timer를 시작한다. 한 페이지에서 동시에 10,000개의 타이머까지 실행이 가능하다.
Console.timeEnd()
지정된 timer를 중지하고, 타이머 시작으로 부터 경과된 시간을 출력한다.
Console.timeStamp()
Adds a marker to the browser's Timeline or Waterfall tool.
Console.trace()
stack trace를 출력한다.
Console.warn()
경고 메시지를 출력한다. 문자열 치환(string substitution)과 추가 인자를 사용할 수 있다.

Usage

콘솔에 텍스트를 출력하기

콘솔에서 가장 많이 사용되는 기능은 데이터와 텍스트를 출력하는 것이다. console.log(), console.info(), console.warn(), console.error() 와 같은 출력 메소드를 이용하여 4종류의 출력 카테고리를 지정할 수 있다. 각각의 출력 결과물들은 로그에 다른 형식으로 스타일링되며, 브라우저에서 제공하는 필터링 기능을 이용하여 관심있는 종류의 출력만 확인할 수 있다.

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

단일 객체를 출력하기

단일 객체는 다음과 같은 방법으로 출력한다:

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})

문자열 치환 기능(string substitutions)

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

Substitution string Description
%o or %O Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %i Outputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%s Outputs a string.
%f Outputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10

Each of these pulls the next argument after the format string off the parameter list. For example:

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 출력을 스타일링 하기

You can use the "%c" directive to apply a CSS style to console output:

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
The test before the directive will not affected, but the text after the directive will be styled using the CSS declarations in the parameter.
 
 

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones provide useful.

 

Using groups in the console

(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.

To exit the current group, simply call console.groupEnd(). For example, given this code:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

The output looks like this:

nesting.png

Timers

(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

For example, given this code:

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

will log the time needed by the user to discard the alert box:

timerresult.png

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.

Stack traces

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call console.trace(). Given code like this:

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

foo();

The output in the console looks something like this:

Specification

Console Object API

Notes

  • At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.
  • Prior to Gecko 12.0, the console object's methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.
  • It's worth noting that the Firefox's built-in console object is compatible with the one provided by Firebug.

See also

Other implementations

문서 태그 및 공헌자

 이 페이지의 공헌자: roupkk
 최종 변경: roupkk,