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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: Console.log()
slug: Web/API/Console/log
translation_of: Web/API/Console/log
---
<div>{{APIRef("Console API")}}</div>
<p>Виводить повідомлення у веб консоль.</p>
<p>Повідомлення може бути одним рядком (з необов'язковими значеннями заміщення) або може бути будь-яким одним або декількома об'єктами JavaScript.</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
</pre>
<h2 id="Параметри">Параметри</h2>
<dl>
<dt><code>obj1</code> ... <code>objN</code></dt>
<dd>Перелік JavaScript об'єктів для відображення. Представлення кожного з цих об'єктів об'єднаних разом та відображених в порядку переліку. Будьте обачливі, якщо ви вносите об'єкти в логи у останніх версіях Chrome та Firefox, адже те, що ви отримуєте у логах в консолі - це <em>посилання на об'єкти</em>, які не обов'язково є "значенням" даного об'єкту на момент виклику console.log(), але точно є значенням об'єкту в момент кліку по ньому, щоб відкрити.</dd>
<dt><code>msg</code></dt>
<dd> JavaScript рядок містить нуль або більше <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символів підміни</a>.</dd>
<dt><code>subst1</code> ... <code>substN</code></dt>
<dd>JavaScript об'єкти за допомогою яких можливо заміняти <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символи підміни</a> в межах <code>msg</code>. Це надає додатковий контроль формату виводу.</dd>
</dl>
<p>Дивіться <a href="https://developer.mozilla.org/en-US/docs/DOM/console#Outputting_text_to_the_console">Вивід тексту в консоль</a> у документації {{domxref("console")}} більш детально.</p>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Console API", "#log", "console.log()")}}</td>
<td>{{Spec2("Console API")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Ознака</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>8</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Рядки заміщення</td>
<td>{{CompatVersionUnknown}}<br>
{{CompatChrome(28)}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("9.0")}}</td>
<td>10<sup>[2]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Доступність для "воркерів"</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("38.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Ознака</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Рядки заміщення</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("9.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Доступність для "воркерів"</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("38.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Якщо від`ємне значення прямує до <code>%d</code>, воно буде заокруглене до найближчого від`ємного цілого, тому -0.1 стає -1.</p>
<p>[2] <code>%c</code> не підтримується, <code>%d</code> буде візуалізоване, як 0, якщо це не є числом.</p>
<h2 id="Різниця_із_console.dir()">Різниця із console.dir()</h2>
<p>Ви можете запитати себе, яка ж відмінність між console.dir() та console.log().</p>
<p>Інша корисна відмінність існує у Chrome, коли відбувається надсилання DOM- елементів до консолі.</p>
<p><img alt="" src="http://i.imgur.com/DozDcYR.png"></p>
<p>Помітимо:</p>
<ul>
<li><code>console.log</code> друкує елемент у вигляді дерева HTML</li>
<li><code>console.dir</code> друкує елемент у вигляді JSON - дерева.</li>
</ul>
<p>Зокрема, <code>console.log</code> надає спеціальну обробку для DOM - елементів, тоді як <code>console.dir</code> цього не робить. Це часто виявляється корисним при спробі отримати повне уявлення про об`єкти DOM JS.</p>
<p>Більше інформації про ці та інші функції можна отримати за посиланням: <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API</a>.</p>
<h2 id="Також_перегляньте">Також перегляньте:</h2>
<ul>
<li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
<li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
<li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug підтримує додаткові можливості у власній реалізації console.log(), наприклад, <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
<li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
</ul>
|
