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

Console オブジェクトは任意のグローバルオブジェクト、すなわちブラウジングスコープの WindowWorkerGlobalScope、および Worker における具体的な派生オブジェクトから、console プロパティを通してアクセスできます。たとえば:

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

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

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

メソッド

Console.assert()
第 1 引数が false であれば、メッセージとスタックトレースをコンソールに記録します。
Console.clear()
コンソールをクリアします。
Console.count()
行が呼び出された回数および指定したラベルを記録します。
Console.debug()
log() の別名です。
: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.
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.timeStamp()
ブラウザの Timelineタイムラインツールにマーカーを追加します。
Console.trace()
スタックトレースを出力します。
Console.warn()
警告メッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

使用方法

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

console でもっとも頻繁に使用される機能は、テキストやその他のデータをログ出力することです。生成することができる出力のカテゴリは 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})

文字列置換を使用する

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) で、文字列置換をサポートしました。console オブジェクトで文字列を受け入れるメソッドに対して文字列を渡すときに、下記の置換文字列を使うことができます:

置換文字列 説明
%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

これらの文字列は、パラメータのリストでフォーマット文字列の後にある引数の値を引用します。例えば:

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 宣言を使用して装飾されます。
 
 

注記: この装飾では、かなりの数の CSS プロパティをサポートしています。どのプロパティが役に立つか、試行および確認するとよいでしょう。

 

コンソールでグループを使用する

Gecko 9.0 が必要(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

関連するデータを視覚的に結合することによりコンソール出力をまとめるのに役立つ、入れ子になったグループを使用することができます。新たな入れ子のブロックを作成するには、console.group() を呼び出します。console.groupCollapsed() メソッドはも似ていますが、こちらは折りたたまれた状態の新たなブロックを作成し、中身を読むには展開ボタンを操作してブロックを開く必要があります。

注記: Gecko では、折りたたまれたグループは未サポートです。現在、groupCollapsed() メソッドと group() メソッドは同じです。

現在のグループを抜けるには、console.groupEnd() を呼び出します。例えば、以下のコードを実行します:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

出力は以下のようになります:

nesting.png

タイマー

Gecko 10.0 が必要(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

特定の操作にかかる時間を計るため、Gecko 10 は console オブジェクトにタイマーを採用しました。タイマーを開始するには、パラメータとして名前を与えて console.time() メソッドを呼び出します。タイマーを停止して経過時間をミリ秒単位で取得するには、タイマーの名前を再びパラメータとして与えた console.timeEnd() メソッドを呼び出します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。

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

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

ユーザが警告ボックスを閉じるまでに経過した時間が、ログに出力されます:

timerresult.png

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

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

スタックトレース

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

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

foo();

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

仕様

仕様 ステータス コメント
Console API 現行の標準 初期定義。

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 2IE 部分対応 8
補足
部分対応 8
補足
補足 Only functions when developer tools are opened. Otherwise, the 'console' object is undefined.
Opera 完全対応 10.1Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
Available in workersChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 38IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 38Opera Android ? Safari iOS ? Samsung Internet Android ?
assertChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 28IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 28Opera Android ? Safari iOS ? Samsung Internet Android ?
clearChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 48IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android ?
countChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 30IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 30Opera Android ? Safari iOS ? Samsung Internet Android ?
countResetChrome 完全対応 ありEdge ? Firefox 完全対応 62IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 62Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
dir
実験的非標準
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 8IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 8Opera Android ? Safari iOS ? Samsung Internet Android ?
dirxml
実験的非標準
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
errorChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Alias for Console.error
非推奨非標準
Chrome 未対応 なしEdge 完全対応 13Firefox 完全対応 28IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 28Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
groupChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 4IE 完全対応 11Opera 完全対応 ありSafari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
groupCollapsedChrome 完全対応 6Edge 完全対応 12Firefox 完全対応 52IE 完全対応 11Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android ? Safari iOS ? Samsung Internet Android ?
groupEndChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 9IE 完全対応 11Opera 完全対応 ありSafari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 9Opera Android ? Safari iOS ? Samsung Internet Android ?
infoChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 ありSafari 完全対応 あり
補足
完全対応 あり
補足
補足 No information icon
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
logChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
profile
実験的非標準
Chrome 完全対応 53Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android ? Safari iOS ? Samsung Internet Android ?
profileEnd
実験的非標準
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android ? Safari iOS ? Samsung Internet Android ?
tableChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 34IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 34Opera Android ? Safari iOS ? Samsung Internet Android ?
timeChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 10IE 完全対応 11Opera 完全対応 ありSafari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android ? Safari iOS ? Samsung Internet Android ?
timeEndChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 10IE 完全対応 11Opera 完全対応 ありSafari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android ? Safari iOS ? Samsung Internet Android ?
timeLogChrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 854474.
Edge 未対応 なしFirefox 完全対応 62IE 未対応 なしOpera 未対応 なしSafari 未対応 なし
補足
未対応 なし
補足
補足 See bug 186833.
WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 62Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
timestamp
実験的非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 10Opera Android ? Safari iOS ? Samsung Internet Android ?
traceChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 10IE 完全対応 11Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android ? Safari iOS ? Samsung Internet Android ?
warnChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

注記

  • 少なくとも Firefox では、ページで console オブジェクトを定義すると Firefox が内蔵している console オブジェクトをオーバーライドします。
  • Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) より前のバージョンでは、console オブジェクトのメソッドは Web コンソールを開いている場合のみ動作します。Gecko 12.0 より、Web コンソールを開くまで出力内容がキャッシュされ、コンソールが開かれたときにそれらが表示されます。
  • Firefox 組み込みの console オブジェクトは Firebug が提供する console オブジェクトと互換性があることは知っておくべきでしょう。

関連情報

その他の実装

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, woodmix, YuichiNukiyama, yyss, AshfaqHossain, ethertank, saneyuki_s
最終更新者: Uemmra3,