{{APIRef("Console API")}}
console オブジェクトは、ブラウザーのデバッグコンソール (例えば Firefox のウェブコンソール) へアクセスする機能を提供します。このオブジェクトの詳細な動作はブラウザーによって異なりますが、一般的に共通の機能セットが提供されています。
console オブジェクトには任意のグローバルオブジェクトからアクセスできます。閲覧スコープの {{domxref("Window")}} や、特定の種類のワーカーを表す {{domxref("WorkerGlobalScope")}} の console プロパティを通してアクセスできます。これは {{domxref("Window.console")}} として公開されていますが、単に console として参照できます。
console.log("Failed to open the specified link")
このページでは、 console オブジェクトで使用できる{{anch("Methods", "メソッド")}}や{{anch("Usage","使用例")}}を掲載します。
{{AvailableInWorkers}}
注: 経緯上の理由から、実際の console インターフェイスはすべて小文字で定義されています (つまり Console ではない)。
false であれば、メッセージとスタックトレースをコンソールに出力します。debug のコンソールへメッセージを出力します。error() の別名です。groupEnd() を呼び出します。group() との違いは、グループが折りたたまれた状態で作られ、それを開くには展開ボタンを操作する必要があることです。レベルを戻すには、groupEnd() を呼び出します。コンソールでもっとも頻繁に使用される機能は、テキストやその他のデータをログ出力することです。生成することができる出力のカテゴリは 4 つあり、{{domxref("console.log()")}}、{{domxref("console.info()")}}、{{domxref("console.warn()")}}、{{domxref("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%d または %iconsole.log("Foo %.2d", 1.1) は、先頭に 0 を補った有効数字 2 桁の数値として出力します: Foo 01%s%fconsole.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 では — 他のブラウザーでは異なる可能性があります)。
text-* properties such as {{cssxref("text-transform")}}注: コンソールメッセージは、既定ではインライン要素と同様に動作します。 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");
出力は以下のようになります。
特定の操作にかかる時間を計るため、タイマーを設定することができます。タイマーを開始するには、引数で名前を指定して 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回目のアラートを解除するのを待ってから、終了時間をコンソールに記録します。
タイマーの名前は、タイマーの開始時と停止時の両方で表示されることに注意してください。
注: タイマーをネットワーク通信の時間の計測に用いる場合、タイマーはトランザクション全体の所要時間を報告しますが、ネットワークパネルに表示される時間はヘッダーの処理にかかった時間だけを表すことに注意してください。レスポンス本文の記録を有効にしている場合は、レスポンスヘッダーとレスポンス本文それぞれに表示される所要時間の合計が、コンソールに出力されている時間に一致します。
console オブジェクトはスタックトレースの出力にも対応しています。これは {{domxref("console.trace()")}} を呼び出した場所へ至るための呼び出し経路を表示するものです。以下のコードで考えましょう:
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
コンソールへの出力内容は以下のようになります。
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName('Console API')}} | {{Spec2('Console API')}} | 初回定義 |
{{Compat("api.Console")}}
console オブジェクトを定義すると Firefox が内蔵している console オブジェクトをオーバーライドします。