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 現行の標準 初期定義。

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4 あり28110.13.1
Available in workers あり あり38 あり あり あり
assert あり1228 あり あり あり
clear あり1248 あり あり あり
count あり1230 あり あり あり
dir あり1289 あり あり
dirxml あり12 あり あり あり ?
error あり1248 あり あり
Alias for Console.error なし1328 なし なし なし
group212411 あり4
groupCollapsed6125211 ?5.1
groupEnd212911 あり4
info あり1248 あり あり2
log あり1248 あり あり
profile5312 あり あり ? ?
profileEnd あり12 あり あり ? ?
table あり1334 なし あり あり
time2121011 あり4
timeEnd2121011 あり4
timestamp あり ? あり なし あり あり
trace あり121011 あり あり
warn あり1248 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり ?3.2 あり
Available in workers ? ? あり38 ? ? ?
assert ? ? ?28 ? ? ?
clear ? ? ?48 ? ? ?
count ? ? あり30 ? ? ?
dir ? ? あり8 ? ? ?
dirxml ? ? あり なし ? ? ?
error あり ? あり4 ? ? ?
Alias for Console.error なし なし あり28 ? なし なし
group ? ? あり4 ? ? ?
groupCollapsed ? ? あり52 ? ? ?
groupEnd ? ? あり9 ? ? ?
info ? ? あり4 ? ? ?
log ? ? あり4 ? ? ?
profile ? ? あり10 ? ? ?
profileEnd ? ? あり10 ? ? ?
table ? ? あり34 ? ? ?
time ? ? あり10 ? ? ?
timeEnd ? ? あり10 ? ? ?
timestamp ? ? ?10 ? ? ?
trace ? ? あり10 ? ? ?
warn ? ? あり4 ? ? ?

1. Only functions when developer tools are opened. Otherwise, the 'console' object is undefined.

2. No information icon

注記

  • 少なくとも 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,