From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/console/assert/index.html | 99 +++++++++ files/ko/web/api/console/clear/index.html | 43 ++++ files/ko/web/api/console/count/index.html | 102 +++++++++ files/ko/web/api/console/countreset/index.html | 108 +++++++++ files/ko/web/api/console/debug/index.html | 59 +++++ files/ko/web/api/console/error/index.html | 77 +++++++ files/ko/web/api/console/group/index.html | 83 +++++++ files/ko/web/api/console/index.html | 296 +++++++++++++++++++++++++ files/ko/web/api/console/log/index.html | 94 ++++++++ files/ko/web/api/console/time/index.html | 56 +++++ files/ko/web/api/console/timeend/index.html | 68 ++++++ files/ko/web/api/console/trace/index.html | 77 +++++++ files/ko/web/api/console/warn/index.html | 70 ++++++ 13 files changed, 1232 insertions(+) create mode 100644 files/ko/web/api/console/assert/index.html create mode 100644 files/ko/web/api/console/clear/index.html create mode 100644 files/ko/web/api/console/count/index.html create mode 100644 files/ko/web/api/console/countreset/index.html create mode 100644 files/ko/web/api/console/debug/index.html create mode 100644 files/ko/web/api/console/error/index.html create mode 100644 files/ko/web/api/console/group/index.html create mode 100644 files/ko/web/api/console/index.html create mode 100644 files/ko/web/api/console/log/index.html create mode 100644 files/ko/web/api/console/time/index.html create mode 100644 files/ko/web/api/console/timeend/index.html create mode 100644 files/ko/web/api/console/trace/index.html create mode 100644 files/ko/web/api/console/warn/index.html (limited to 'files/ko/web/api/console') diff --git a/files/ko/web/api/console/assert/index.html b/files/ko/web/api/console/assert/index.html new file mode 100644 index 0000000000..3ad2aafa8e --- /dev/null +++ b/files/ko/web/api/console/assert/index.html @@ -0,0 +1,99 @@ +--- +title: console.assert() +slug: Web/API/Console/assert +tags: + - API + - DOM + - Method + - Reference + - console +translation_of: Web/API/console/assert +--- +
{{APIRef("Console API")}}
+ +

console.assert() 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.

+ +

{{AvailableInWorkers}}

+ +

구문

+ +
console.assert(assertion, obj1 [, obj2, ..., objN]);
+console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting
+
+ +

Parameters

+ +
+
assertion
+
아무 불리언 표현식. 거짓인 경우, 메시지를 콘솔에 출력합니다.
+
obj1 ... objN
+
출력에 사용할 JavaScript 객체. 각각의 문자열 표현을 순서대로 출력합니다.
+
msg
+
0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.
+
subst1 ... substN
+
msg 매개변수의 치환 문자열에 대입할 JavaScript 객체.
+
+ +

예제

+ +

다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.

+ +
const errorMsg = 'the # is not even';
+for (let number = 2; number <= 5; number += 1) {
+    console.log('the # is ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // or, using ES2015 object property shorthand:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// the # is 2
+// the # is 3
+// Assertion failed: {number: 3, errorMsg: "the # is not even"}
+// the # is 4
+// the # is 5
+// Assertion failed: {number: 5, errorMsg: "the # is not even"}
+
+ +

참고로, {{domxref("console.log()")}}의 치환 문자열을 거의 모든 브라우저에서 정상 동작하지만...

+ +
console.log('the word is %s', 'foo');
+// output: the word is foo
+
+ +

console.assert()의 치환 문자열은 일부 브라우저에서 동작하지 않습니다.

+ +
console.assert(false, 'the word is %s', 'foo');
+// correct output in Node.js and some browsers
+//     (e.g. Firefox v60.0.2):
+// Assertion failed: the word is foo
+// incorrect output in some browsers
+//     (e.g. Chrome v67.0.3396.87):
+// Assertion failed: the word is %s foo
+
+ +

{{domxref("console")}} 문서의 콘솔에 텍스트 출력하기 항목도 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#assert", "console.assert()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.assert")}}

diff --git a/files/ko/web/api/console/clear/index.html b/files/ko/web/api/console/clear/index.html new file mode 100644 index 0000000000..540ce73ee5 --- /dev/null +++ b/files/ko/web/api/console/clear/index.html @@ -0,0 +1,43 @@ +--- +title: console.clear() +slug: Web/API/Console/clear +tags: + - API + - Method + - Reference + - console +translation_of: Web/API/Console/clear +--- +
{{APIRef("Console API")}}
+ +

console.clear() 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.

+ +

구문

+ +
console.clear();
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#clear", "console.clear()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.clear")}}

diff --git a/files/ko/web/api/console/count/index.html b/files/ko/web/api/console/count/index.html new file mode 100644 index 0000000000..0040da4c11 --- /dev/null +++ b/files/ko/web/api/console/count/index.html @@ -0,0 +1,102 @@ +--- +title: console.count() +slug: Web/API/Console/count +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Console/count +--- +
{{APIRef("Console API")}}
+ +

console.count() 메서드는 특정 count() 호출의 횟수를 세어 출력합니다.

+ +

{{AvailableInWorkers}}

+ +

구문

+ +
console.count([label]);
+ +

매개변수

+ +
+
label {{Optional_Inline}}
+
{{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 count() 호출의 수를 출력합니다. 누락한 경우 "default"를 지정한 것처럼 동작합니다.
+
+ +

예제

+ +
let user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+ +

위 코드의 출력 결과는 다음과 같은 형태입니다.

+ +
"default: 1"
+"default: 2"
+"default: 3"
+"default: 4"
+ +

레이블을 명시하지 않았기 때문에 default로 나타납니다.

+ +

첫 번째 count()의 매개변수에는 user 변수를 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...

+ +
let user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");
+ +

다음과 같이 출력합니다.

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"
+ +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.count")}}

diff --git a/files/ko/web/api/console/countreset/index.html b/files/ko/web/api/console/countreset/index.html new file mode 100644 index 0000000000..30e6d3ee95 --- /dev/null +++ b/files/ko/web/api/console/countreset/index.html @@ -0,0 +1,108 @@ +--- +title: Console.countReset() +slug: Web/API/Console/countReset +tags: + - API + - DOM + - Method + - Reference + - console +translation_of: Web/API/Console/countReset +--- +
{{APIRef("Console API")}}
+ +

console.countReset() 메서드는 {{domxref("console.count()")}}의 카운터를 초기화합니다.

+ +

{{AvailableInWorkers}}

+ +

구문

+ +
console.countReset([label]);
+
+ +

매개변수

+ +
+
label {{optional_inline}}
+
{{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 count()를 초기화합니다. 누락한 경우 "default" 카운터를 초기화합니다.
+
+ +

예제

+ +
let user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();
+ +

위 코드의 출력 결과는 다음과 같은 형태입니다.

+ +
"default: 1"
+"default: 2"
+"default: 3"
+"default: 4"
+"default: 0"
+
+ +

countReset()이 기본 카운터를 초기화했음을 알 수 있습니다.

+ +

레이블을 지정한 경우...

+ +
let user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");
+ +

다음과 같이 출력합니다.

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"
+ +

카운터 bob을 초기화해도 alice의 값에는 영향이 없습니다.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.countReset()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.countReset")}}

diff --git a/files/ko/web/api/console/debug/index.html b/files/ko/web/api/console/debug/index.html new file mode 100644 index 0000000000..86a3abbc0d --- /dev/null +++ b/files/ko/web/api/console/debug/index.html @@ -0,0 +1,59 @@ +--- +title: console.debug() +slug: Web/API/Console/debug +tags: + - API + - Method + - Reference + - console +translation_of: Web/API/Console/debug +--- +
{{APIRef("Console API")}}
+ +

console.debug() 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다.

+ +

{{AvailableInWorkers}}

+ +

구문

+ +
console.debug(obj1 [, obj2, ..., objN]);
+console.debug(msg [, subst1, ..., substN]);
+
+ +

매개변수

+ +
+
obj1 ... objN
+
출력에 사용할 JavaScript 객체. 각각의 문자열 표현을 순서대로 출력합니다.
+
msg
+
0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.
+
subst1 ... substN
+
msg 매개변수의 치환 문자열에 대입할 JavaScript 객체.
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#debug", "console.debug()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.Console.debug")}}

+
diff --git a/files/ko/web/api/console/error/index.html b/files/ko/web/api/console/error/index.html new file mode 100644 index 0000000000..529632b39e --- /dev/null +++ b/files/ko/web/api/console/error/index.html @@ -0,0 +1,77 @@ +--- +title: Console.error() +slug: Web/API/Console/error +tags: + - API + - DOM + - 디버깅 + - 메소드 + - 웹 개발 + - 웹 콘솔 +translation_of: Web/API/Console/error +--- +
{{APIRef("Console API")}}
+ +

웹 콘솔에 에러 메시지를 출력합니다.

+ +

{{AvailableInWorkers}}

+ +

문법

+ +
console.error(obj1 [, obj2, ..., objN]);
+console.error(msg [, subst1, ..., substN]);
+console.exception(obj1 [, obj2, ..., objN]);
+console.exception(msg [, subst1, ..., substN]);
+
+ +
+

노트: console.exception()은 console.error()의 별칭입니다. 둘은 기능적으로 동일합니다.

+
+ +

파라미터

+ +
+
obj1 ... objN
+
출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 나열된 순서로 함께 출력됩니다.
+
msg
+
0개 이상의 하위 문자열을 포함하는 JavaScript 문자열.
+
subst1 ... substN
+
msg 안의 대체할 하위 문자열을 포함하는 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.
+
+ +

자세한 내용은 {{domxref("console")}} 문서의 콘솔에 텍스트를 출력하기를 확인하세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#error", "console.error()")}}{{Spec2("Console API")}}초기 정의
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.Console.error")}}

+
+ +

함께 보기

+ + diff --git a/files/ko/web/api/console/group/index.html b/files/ko/web/api/console/group/index.html new file mode 100644 index 0000000000..a4c4033612 --- /dev/null +++ b/files/ko/web/api/console/group/index.html @@ -0,0 +1,83 @@ +--- +title: Console.group() +slug: Web/API/Console/group +translation_of: Web/API/Console/group +--- +
{{APIRef("Console API")}}
+ +

Web Console log 에 새로운 인라인 그룹을 만듭니다. This indents all following output by an additional level, until {{domxref("console.groupEnd()")}} is called.

+ +

{{AvailableInWorkers}}

+ +

구문

+ +
console.group([label]);
+ +

매개변수

+ +

 

+ +
+
label
+
Label for the group. Optional. (Chrome 59 tested) Does not work with console.groupEnd().
+
+ +

{{h3_gecko_minversion("Using groups in the console", "9.0")}}

+ +

You can use nested groups to help organize your output by visually associating related messages. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but the new block is collapsed and requires clicking a disclosure button to read it.

+ +

Note: From Gecko 9 until Gecko 51, the groupCollapsed() method was the same as group(). Collapsed groups are fully supported starting in Gecko 52. See {{bug("1088360")}}.

+ +

To exit the current group, 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.log("Back to the outer level");
+ +

The output looks like this:

+ +

A screenshot of messages nested in the console output.

+ +

See Using groups in the console in the documentation of {{domxref("console")}} for more details.

+ +

 

+ +

설명

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#group", "console.group()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ +

 

+ +

{{Compat("api.Console.group")}}

+ +

 

+ +

더 보기

+ + diff --git a/files/ko/web/api/console/index.html b/files/ko/web/api/console/index.html new file mode 100644 index 0000000000..cd815b0979 --- /dev/null +++ b/files/ko/web/api/console/index.html @@ -0,0 +1,296 @@ +--- +title: console +slug: Web/API/Console +tags: + - API + - Interface + - Reference + - console + - 콘솔 +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

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

+ +

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

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

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

+ +

{{AvailableInWorkers}}

+ +
+

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

+
+ +

메서드

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

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

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

예제

+ +

콘솔에 텍스트 출력하기

+ +

콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("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 또는 %OJavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.
%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

+ +

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

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

스택 추적

+ +

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

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

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

+ +

+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console")}}

+ +

같이 보기

+ + + +

다른 구현체

+ + diff --git a/files/ko/web/api/console/log/index.html b/files/ko/web/api/console/log/index.html new file mode 100644 index 0000000000..0b67dd2293 --- /dev/null +++ b/files/ko/web/api/console/log/index.html @@ -0,0 +1,94 @@ +--- +title: Console.log() +slug: Web/API/Console/log +tags: + - API + - console + - console.log() + - 메소드 +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +

Web Console에 메시지를 출력합니다.

+ +

{{AvailableInWorkers}}

+ +

구문

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

매개 변수

+ +
+
obj1 ... objN
+
출력할 자바스크립트 객체의 모음입니다. 각각의 자바스크립트 객체들의 문자열 표현은 순서가 있는 목록에 추가되며, 출력됩니다. 
+
msg
+
0개 이상의 치환 문자열(ex:%d, %s)들을 포함하는 자바스크립트 문자열입니다.
+
subst1 ... substN
+
msg 내의 치환 문자열들을 치환할 자바스크립트 객체들입니다. 이것은 추가적인 출력 형식 제어권을 제공합니다.
+
+ +

자세한 내용은 {{domxref("console")}} 기록 문서에서 Outputting text to the console을 참조하십시오.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#consolelogobject--object-", "console.log()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.log")}}

+ +

console.dir() 과의 차이

+ +

당신은 console.dir() 과 console.log() 가 무엇이 다른지 궁금할 수 있습니다.

+ +

DOM 요소들을 콘솔로 보낼 때 Chrome에서 다른 유용한 차이점이 있습니다.

+ +

+ +

안내:

+ + + +

구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

+ +

이것과 다른 함수들에 대한 더 많은 정보가  Chrome Console API reference에 있습니다.

+ +

객체 로깅하기

+ +

console.log(obj);를 사용하지 말고 
+ console.log(JSON.parse(JSON.stringify(obj)));를 사용하시기 바랍니다.

+ +

이 방법은 여러분이 로그를 남길 당시의 obj 값을 보려고 사용했을겁니다. 그러나 많은 브라우저가 값이 갱신 될때마다 끊임없이 바뀐 값을 보여줍니다. 이는 여러분이 원하는 방법이 아닐겁니다.

+ +

참조

+ + diff --git a/files/ko/web/api/console/time/index.html b/files/ko/web/api/console/time/index.html new file mode 100644 index 0000000000..bcb3777ccb --- /dev/null +++ b/files/ko/web/api/console/time/index.html @@ -0,0 +1,56 @@ +--- +title: Console.time() +slug: Web/API/Console/time +translation_of: Web/API/Console/time +--- +
{{APIRef("Console API")}}
+ +

타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.

+ +

자세한 내용과 예제는 {{domxref("console")}} 내의 타이머를 확인하세요.

+ +

{{AvailableInWorkers}}

+ +

문법

+ +
console.time(label);
+
+ +

파라미터

+ +
+
label
+
새 타이머에게 설정할 이름. 타이머를 식별합니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출하면 타이머가 중단되고 콘솔에 시간을 출력합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#time", "console.time()")}}{{Spec2("Console API")}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.time")}}

+ +

함께 보기

+ + diff --git a/files/ko/web/api/console/timeend/index.html b/files/ko/web/api/console/timeend/index.html new file mode 100644 index 0000000000..d9bc7674e5 --- /dev/null +++ b/files/ko/web/api/console/timeend/index.html @@ -0,0 +1,68 @@ +--- +title: Console.timeEnd() +slug: Web/API/Console/timeEnd +tags: + - 디버깅 + - 웹 개발 + - 웹 콘솔 + - 콘솔 + - 타이머 +translation_of: Web/API/Console/timeEnd +--- +
{{APIRef("Console API")}}
+ +
이전에 {{domxref("console.time()")}}를 호출하여 시작된 타이머를 중지하고 웹 콘솔에 경과 시간을 밀리초 단위로 표시합니다.
+ +
 
+ +
자세한 내용과 예제는 콘솔 문서의 Timers를 참조하세요.
+ +
 
+ +

{{AvailableInWorkers}}

+ +

구문(Syntax)

+ +
console.timeEnd(label);
+
+ +

매개 변수(Parameters)

+ +
+
label
+
중지할 타이머의 이름입니다. console.time()를 호출할 때의 이름을 사용하여 해당 타이머를 중지할 수 있는 식별자 역할을 합니다.
+
+ +

명세서(Specifications)

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Initial definition
+ +

브라우저 호환성(Browser compatibility)

+ +
+ + +

{{Compat("api.Console.timeEnd")}}

+
+ +

함께 보기(See also)

+ + diff --git a/files/ko/web/api/console/trace/index.html b/files/ko/web/api/console/trace/index.html new file mode 100644 index 0000000000..2726eca0d4 --- /dev/null +++ b/files/ko/web/api/console/trace/index.html @@ -0,0 +1,77 @@ +--- +title: console.trace() +slug: Web/API/Console/trace +tags: + - API + - DOM + - Firefox + - 디버깅 + - 메소드 + - 웹 개발 + - 웹 콘솔 + - 추적 + - 콘솔 + - 크롬 +translation_of: Web/API/Console/trace +--- +
{{APIRef("Console API")}}
+ +

웹 콘솔에 스택 추적을 출력합니다.

+ +

{{AvailableInWorkers}}

+ +

자세한 내용과 예제는 {{domxref("console")}} 내의 스택 추적을 확인하세요.

+ +

문법

+ +
console.trace();
+
+ +

예제

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

콘솔에 다음과 같은 추적이 표시됩니다.

+ +
bar
+foo
+<anonymous>
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#trace", "console.trace()")}}{{Spec2("Console API")}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.trace")}}

+ +

함께 보기

+ + diff --git a/files/ko/web/api/console/warn/index.html b/files/ko/web/api/console/warn/index.html new file mode 100644 index 0000000000..b63bb925db --- /dev/null +++ b/files/ko/web/api/console/warn/index.html @@ -0,0 +1,70 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +tags: + - API + - DOM + - 디버깅 + - 메소드 + - 웹 개발 + - 웹 콘솔 +translation_of: Web/API/Console/warn +--- +
{{APIRef("Console API")}}
+ +

웹 콘솔에 경고 메시지를 출력합니다.

+ +

{{AvailableInWorkers}}

+ +

{{Note("Firefox에서는 웹 콘솔의 경고 옆에 작은 느낌표 아이콘이 나타납니다.")}}

+ +

문법

+ +
console.warn(obj1 [, obj2, ..., objN]);
+console.warn(msg [, subst1, ..., substN]);
+
+ +

파라미터

+ +
+
obj1 ... objN
+
출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다.
+
msg
+
0개 이상의 문자열을 포함하는 JavaScript 문자열.
+
subst1 ... substN
+
msg 안의 문자열을 대체하기 위한 JavaScript 객체. 출력의 형식을 추가로 제어할 수 있게해줍니다.
+
+ +

자세한 내용은 {{domxref("console")}} 문서 내 콘솔에 텍스트를 출력하기를 확인하세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#warn", "console.warn()")}}{{Spec2("Console API")}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("api.Console.warn")}}

+ +

함께 보기

+ + -- cgit v1.2.3-54-g00ecf