blob: ae971695f2d2c5dfc7f1178b6ecc692effbaf9cf (
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: console.log()
slug: Web/API/Console/log
tags:
- API
- DOM
- Debugging
- HTML-tree
- Method
- Reference
- Web Development
- console
- console.dir()
- console.log()
- difference
- web console
translation_of: Web/API/Console/log
---
<div>{{APIRef("Console API")}}</div>
<p><span class="seoSummary">{{domxref("Console")}} の <strong><code>log()</code></strong> メソッドは、ウェブコンソールにメッセージを出力します。</span>このメッセージは単一の文字列 (オプションの置換値を含む) であることもあれば、1 つ以上の JavaScript オブジェクトであることもあります。</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">console.log(<var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]);
console.log(<var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]);
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code>obj1</code> ... <code>objN</code></dt>
<dd>出力する JavaScript オブジェクトのリスト。各オブジェクトの文字列表現が記述順で出力されます。 Chrome や Firefox の比較的新しいバージョンを使っているなら注意が必要です。これらのブラウザーで記録されるのは<em>オブジェクトへの参照</em>です。そのため、 <code>console.log()</code> を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。</dd>
<dt><code>msg</code></dt>
<dd>0 個以上の置換文字列を含む JavaScript 文字列</dd>
<dt><code>subst1</code> ... <code>substN</code></dt>
<dd>JavaScript オブジェクトと <code>msg</code> 内の置換文字列を置換。これにより、出力の書式の詳細な制御が可能となります。</dd>
</dl>
<p>詳細については {{domxref("console")}} の「<a href="/ja/docs/Web/API/console#Outputting_text_to_the_console">コンソールへのテキスト出力</a>」の節を参照して下さい。</p>
<h2 id="log_と_dir_との違い">log() と dir() との違い</h2>
<p>{{domxref("console.dir()")}} と <code>console.log()</code> の違いは何かという疑問を持つかもしれません。</p>
<p>Chrome では、コンソールに DOM 要素を送信した場合に大きな違いがあります。</p>
<p><img alt="" src="https://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 reference</a> に掲載されています。</p>
<h2 id="Logging_objects" name="Logging_objects">オブジェクトのログ出力</h2>
<p><code>console.log(obj)</code> を使わず、 <code>console.log(JSON.parse(JSON.stringify(obj)))</code> を使用してください。</p>
<p>これにより、ログを記録した瞬間の <code>obj</code> の値を確実に見ることができます。こうしないと、多くのブラウザーでは値が変化したときに常に更新されるライブビューになります。これは望むことではないかもしれません。</p>
<h2 id="Specification" name="Specification">仕様書</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>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.Console.log")}}</p>
<h2 id="See_also" name="See_also">関連情報</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: F12 ツールのコンソールを使ったエラーおよびステータスの表示</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/">『スタイリングされたログ出力』</a> などの追加機能もサポートしています。</li>
<li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
</ul>
|
