console

console オブジェクトは、ブラウザーのデバッグコンソール (例えば Firefox のウェブコンソール) へアクセスする機能を提供します。このオブジェクトの詳細な動作はブラウザーによって異なりますが、一般的に共通の機能セットが提供されています。

console オブジェクトには任意のグローバルオブジェクトからアクセスできます。閲覧スコープの Window や、特定の種類のワーカーを表す WorkerGlobalScope の console プロパティを通してアクセスできます。これは Window.console として公開されていますが、単に console として参照できます。

console.log("Failed to open the specified link")

このページでは、 console オブジェクトで使用できるメソッド使用例を掲載します。

註: この機能は Web Workers 内で利用可能です。

: 経緯上の理由から、実際の console インターフェイスはすべて小文字で定義されています (つまり Console ではない)。

メソッド

console.assert()
第 1 引数が false であれば、メッセージとスタックトレースをコンソールに出力します。
console.clear()
コンソールをクリアします。
console.count()
指定されたラベルでこの行が呼び出された回数をログ出力します。
console.countReset()
指定されたラベルのカウンターの値をリセットします。
console.debug()
ログレベルが debug のコンソールへメッセージを出力します。
console.dir()
指定した JavaScript オブジェクトのプロパティの、対話型リストを表示します。このリスト内の三角印をクリックすると、子オブジェクトの内容を調査して表示させることができます。
console.dirxml()
指定したオブジェクトを XML/HTML 要素で表現したものを表示します。表現できない場合は、JavaScript オブジェクトビューを表示します。
console.error()
エラーメッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。
console.exception()
error() の別名です。
console.group()
以降の出力を別のレベルにインデントする、新たなインライングループを作成します。レベルを戻すには、groupEnd() を呼び出します。
console.groupCollapsed()
以降の出力を別のレベルにインデントする、新たなインライングループを作成します。group() との違いは、グループが折りたたまれた状態で作られ、それを開くには展開ボタンを操作する必要があることです。レベルを戻すには、groupEnd() を呼び出します。
console.groupEnd()
現在のインライングループから抜けます。
console.info()
メッセージタイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。
console.log()
一般タイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。
console.profile()
ブラウザー内蔵のプロファイラー (例えば Firefox のパフォーマンスツール) を開始します。プロファイルの名称を指定することができます。
console.profileEnd()
プロファイラーを停止します。結果のプロファイルは、ブラウザーのパフォーマンスツール (例えば Firefox のパフォーマンスツール) で確認できます。
console.table()
表形式のデータを、表を使用して表示します。
console.time()
入力引数で指定された名前のタイマーを開始します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。
console.timeEnd()
指定されたタイマーを停止して、そのタイマーを開始してからの時間を秒単位でログに出力します。
console.timeLog()
指定されたタイマーの値をコンソールへ出力します。
console.timeStamp()
ブラウザのー Timelineタイムラインツールにマーカーを追加します。
console.trace()
スタックトレースを出力します。
console.warn()
警告メッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

使用方法

コンソールにテキストを出力する

コンソールでもっとも頻繁に使用される機能は、テキストやその他のデータをログ出力することです。生成することができる出力のカテゴリは 4 つあり、console.log()console.info()console.warn()console.error() の各メソッドを使用します。これらメソッドの出力結果はログ上でそれぞれ異なるスタイルがつけられ、また関心がある種類の出力だけを参照するためにブラウザーが提供するフィルタ機能を使用することもできます。

各出力メソッドを使用する方法は 2 つあります。複数の文字列表現を 1 つの文字列に連結してコンソールに出力する形でオブジェクトのリストを渡す方法と、オブジェクトのリストに続けてそれらを置き換える任意の個数の置換文字列を渡す方法です。

単一のオブジェクトの出力

もっとも簡単にログを記録する方法は、単一のオブジェクトを出力することです。

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

文字列置換の使用

文字列を取る console オブジェクトのメソッドの一つ (log() など) に文字列を渡すと、以下の置換文字列を使用することができます。

%o または %O
JavaScript オブジェクトを出力します。オブジェクト名をクリックすると、調査ツールで詳細情報を表示します。
%d または %i
整数値を出力します。数値の書式設定をサポートしています。例えば console.log("Foo %.2d", 1.1) は、先頭に 0 を補った有効数字 2 桁の数値として出力します: Foo 01
%s
文字列を出力します。
%f
浮動小数点数値を出力します。数値の書式設定に対応しています。例えば console.log("Foo %.2f", 1.1) は、小数部分が 2 桁の数値として出力し、 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.

コンソールの出力のスタイル付け

%c ディレクティブを使用すると、コンソールの出力に CSS スタイルを適用することができます。

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

ディレクティブの前のテキストは影響を受けませんが、ディレクティブの後ろのテキストは引数の CSS 宣言を使用して装飾されます。

%c で利用できるプロパティは次の通りです (少なくとも、 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() メソッドを呼び出します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。

例えば、以下のコードを実行します。

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

ユーザーがアラートボックスを解除するのにかかった時間を記録し、その時間をコンソールに記録し、ユーザーが2回目のアラートを解除するのを待ってから、終了時間をコンソールに記録します。

timerresult.png

タイマーの名前は、タイマーの開始時と停止時の両方で表示されることに注意してください。

注: タイマーをネットワーク通信の時間の計測に用いる場合、タイマーはトランザクション全体の所要時間を報告しますが、ネットワークパネルに表示される時間はヘッダーの処理にかかった時間だけを表すことに注意してください。レスポンス本文の記録を有効にしている場合は、レスポンスヘッダーとレスポンス本文それぞれに表示される所要時間の合計が、コンソールに出力されている時間に一致します。

スタックトレース

console オブジェクトはスタックトレースの出力にも対応しています。これは console.trace() を呼び出した場所へ至るための呼び出し経路を表示するものです。以下のコードで考えましょう:

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

foo();

コンソールへの出力内容は以下のようになります。

仕様書

仕様書 状態 備考
Console API 現行の標準 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ConsoleChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 8
補足
完全対応 8
補足
補足 In Internet Explorer 8 and 9, the console object is undefined when the developer tools are not open. This behavior was fixed in Internet Explorer 10.
Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
assertChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 28IE 完全対応 8Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 28Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
clearChrome 完全対応 25Edge 完全対応 12Firefox 完全対応 48IE 完全対応 8Opera 完全対応 12Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 48Opera Android 完全対応 12Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
countChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 30IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 30Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
countResetChrome 完全対応 68Edge 完全対応 ≤79Firefox 完全対応 62IE 未対応 なしOpera 完全対応 55Safari 完全対応 13WebView Android 完全対応 68Chrome Android 完全対応 68Firefox Android 完全対応 62Opera Android 完全対応 48Safari iOS 完全対応 13Samsung Internet Android 完全対応 10.0
debugChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
dir
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 8IE 完全対応 9Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 8Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
dirxml
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 39IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 39Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
errorChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
exception (an alias for error)
非推奨非標準
Chrome 未対応 なしEdge 未対応 13 — 79Firefox 完全対応 28IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 28Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
groupChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
groupCollapsedChrome 完全対応 6Edge 完全対応 12Firefox 完全対応 52IE 完全対応 11Opera 完全対応 11Safari 完全対応 5.1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 52Opera Android 完全対応 11Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
groupEndChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 9IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 9Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
infoChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
logChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
profile
実験的非標準
Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 16IE 完全対応 9Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
profileEnd
実験的非標準
Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 16IE 完全対応 9Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
tableChrome 完全対応 27Edge 完全対応 13Firefox 完全対応 34IE 未対応 なしOpera 完全対応 11Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 27Firefox Android 完全対応 34Opera Android 完全対応 11Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
timeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 10IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 10Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
timeEndChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 10IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 10Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
timeLogChrome 完全対応 72Edge 完全対応 79Firefox 完全対応 62IE 未対応 なしOpera 完全対応 60Safari 未対応 なし
補足
未対応 なし
補足
補足 See bug 186833.
WebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 完全対応 62Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 11.0
timeStamp
実験的非標準
Chrome 完全対応 14Edge 完全対応 12Firefox 完全対応 39IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 39Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.0
traceChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 10IE 完全対応 11Opera 完全対応 11Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 10Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
warnChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Available in workersChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 38IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 38Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

  • 少なくとも Firefox では、ページで console オブジェクトを定義すると Firefox が内蔵している console オブジェクトをオーバーライドします。

関連情報

その他の実装