blob: 54760b8f783215f68209910a9d3d452da890d958 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
---
title: Console API
slug: Web/API/Console_API
tags:
- API
- Console API
- Overview
- console
- 로그
- 로깅
- 콘솔
translation_of: Web/API/Console_API
---
<div>{{DefaultAPISidebar("Console API")}}</div>
<p><span class="seoSummary"><strong>Console API</strong>는 코드의 특정 지점에서 값이나 변수를 기록하고, 작업의 소요 시간을 알아내는 등 개발자가 사용할 수 있는 디버깅 기능을 제공합니다.</span></p>
<h2 id="개념과_사용법">개념과 사용법</h2>
<p>Console API는 사유 API로 시작하였으며, 브라우저가 각자 다른 구현을 했습니다. 이후 <a href="https://console.spec.whatwg.org/">Console API 명세</a>가 만들어져 일관적인 동작 방식을 정의하였으며, 결국 모든 최신 브라우저가 같은 동작을 따르게 되었습니다. 그러나 일부 구현체는 여전히 자신만의 사유 함수를 가지고 있습니다. 다음 링크에서 알아보세요.</p>
<ul>
<li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools implementation</a></li>
<li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari DevTools implementation</a></li>
</ul>
<p>사용은 매우 간단합니다. {{domxref("Window.console")}}, 워커에서는 {{domxref("WorkerGlobalScope.console")}}, 아니면 그냥 <code>console</code>로 접근 가능한 {{domxref("console")}} 객체는 브라우저의 <a href="/ko/docs/Tools/Web_Console">웹 콘솔</a>에 값을 기록하는 등 기초적인 디버깅 작업에 사용할 수 있는 메서드를 제공합니다.</p>
<p>가장 자주 쓰이는 메서드는 {{domxref("console.log()")}}이며, 변수의 값을 기록할 때 사용합니다.</p>
<h2 id="인터페이스">인터페이스</h2>
<dl>
<dt>{{domxref("console")}}</dt>
<dd>로깅, 스택 추적, 타이머, 카운터 등 기초적인 디버깅 기능을 제공합니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<pre class="brush: js">let myString = 'Hello world';
// Output "Hello world" to the console
console.log(myString);</pre>
<p>{{domxref("console")}} 문서의 <a href="/ko/docs/Web/API/Console#예제">예제</a> 항목에서 더 많은 예제를 확인하세요.</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Console API')}}</td>
<td>{{Spec2('Console API')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.Console")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Tools">Firefox Developer Tools</a></li>
<li><a href="/ko/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
<li><a href="/ko/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
</ul>
|
