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