console

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

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

console オブジェクトが Web コンソールとどのように協調するかについて、詳しくは『Web コンソール』をご覧ください。

Gecko 12.0 note
(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)

Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) までは、console オブジェクトのメソッドは Web コンソールを開いている場合のみ動作します。Gecko 12.0 からは Web コンソールを開くまで出力内容がキャッシュされ、コンソールが開かれたときにそれらが表示されます。

注意: 内蔵の console オブジェクトは Firebug が提供する console オブジェクトと互換性があることは知っておくべきでしょう。

メソッド

console.debug() 非推奨 Gecko 5.0
log() の別名です。これは debug() を使用している既存サイトとの互換性を高めるために追加されました。ただし、これに代わり console.log() を使うべきです。
console.dir()
指定した JavaScript オブジェクトのプロパティの、対話型リストを表示します。このリスト内の三角印をクリックすると、子オブジェクトの内容を調査して表示させることができます。
console.error()
エラーメッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。『文字列置換』をご覧ください。
console.group()
以降の出力を別のレベルにインデントする、新たなインライングループを作成します。レベルを戻すには、groupEnd() を呼び出します。詳しくは『コンソールでのグループの使用』をご覧ください。
console.groupCollapsed()
以降の出力を別のレベルにインデントする、新たなインライングループを作成します。group() との違いは、グループが折りたたまれた状態で作られ、それを開くには展開ボタンを操作する必要があることです。レベルを戻すには、groupEnd() を呼び出します。詳しくは『コンソールでのグループの使用』をご覧ください。
console.groupEnd()
現在のインライングループから抜けます。詳しくは『コンソールでのグループの使用』をご覧ください。
console.info()
メッセージタイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。『文字列置換』をご覧ください。
console.log()
一般タイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。『文字列置換』をご覧ください。
console.time()
入力パラメータとして指定された名前のタイマーを開始します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。
console.timeEnd()
指定されたタイマーを停止し、そのタイマーを開始してからの時間を秒単位でログに出力します。詳しくは『タイマー』をご覧ください。
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)

文字列置換

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

置換文字列 説明
%o JavaScript オブジェクトへのハイパーリンクを出力します。リンクをクリックすると調査ツールが開きます。
%d 整数値を出力します。書式設定は未サポートです。
%i 整数値を出力します。書式設定は未サポートです。
%s 文字列を出力します。
%f 浮動小数点数値を出力します。書式設定は未サポートです。

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

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.
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();
  }
}

foo() を呼び出すと、コンソールへの出力は以下のようになります:

trace-output.png

ログの "スタックトレース: ファイル: Web Console, 関数: bar, 行 1" というエントリがハイパーリンクになっていることに気づくでしょう。これをクリックすると、詳細情報を得ることができるオブジェクトインスペクタが開きます:

trace-inspector.png

この出力内容は、コードを調べてどのようにその場所へたどり着いたのかを明らかにするのに役立つ多くの情報を提供します。特に、そもそもその場所にたどり着くとは考えられないときに有用です。

関連情報

添付ファイル

ファイル サイズ 日時 添付者:
nesting.png
17375 バイト 2012-01-31 14:54:34 Sheppy
timerresult.png
11372 バイト 2012-01-31 20:12:29 Sheppy
trace-inspector.png
50187 バイト 2012-01-31 21:27:37 Sheppy
trace-output.png
20210 バイト 2012-01-31 21:27:38 Sheppy
trash-can-icon
1231 バイト 2013-09-15 15:27:47 gabriel_ivanica

Document Tags and Contributors

Contributors to this page: saneyuki_s, ethertank, yyss
最終更新者: ethertank,