console

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

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

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

メソッド

Console.assert()

第 1 引数が false であれば、メッセージとスタックトレースをコンソールに記録します。

Console.clear()

コンソールをクリアします。

Console.count()

行が呼び出された回数および指定したラベルを記録します。

Console.debug()

log() の別名です。

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 オブジェクトで文字列を受け入れるメソッドに対して文字列を渡すときに、下記の置換文字列を使うことができます:

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

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

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

現在のグループを抜けるには、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");

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

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

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

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

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

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

スタックトレース

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

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

foo();

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

仕様

Console Object API

注記

• 少なくとも 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 オブジェクトと互換性があることは知っておくべきでしょう。

関連情報

• 開発ツール
• Web コンソール — Firefox で Web コンソールが console API の呼び出しを処理する方法
• リモートデバッグ — モバイルデバイスがデバッグ対象である場合に、console の出力を確認する方法
• デバイス上でコンソールログを取る — Firefox OS デバイスでログを記録する方法

その他の実装

• Google Chrome DevTools
• Firebug
• Internet Explorer
• Safari