Web コンソール

Web コンソールでは次のような事が行えます。

1. Web ページに関する情報を記録する：ネットワークリクエスト、JavaScript、CSS、セキュリティエラーや警告のほか、ページの JavaScript によって記録されたエラー、警告、情報メッセージを記録できます。
2. ページコンテンツ内で JavaScript の式を実行することにより、Web ページと対話できます。

これは、Firefox の古いエラーコンソールを置き換えるもののです。エラーコンソールは Web ページ、ブラウザのコード、アドオン由来のエラー、警告、メッセージを一つの場所にすべて表示していました。このため、どのメッセージが特定のページに関するものかを見分けるのがとても困難でした。Web コンソールは常に特定の Web ページに関連づけられており、そのページに関する情報だけを表示します。

エラーコンソールの残りの部分を置き換えるものはブラウザコンソールであり、こちらはブラウザのコードやアドオン由来のエラー、警告、メッセージを表示します。

Web コンソールを開く

Web コンソールを開くには、Firefox メニュー (メニューバーがある場合や Mac OS X では、ツールメニュー) の Web 開発サブメニューで "Web コンソール" を選択するか、キーボードショートカットで CtrlShiftK (OS X では CommandOptionK) を押下します。

Web コンソールがアクティブになっているツールボックスがブラウザウィンドウの下部に現れます (開発ツールのツールバーでは "コンソール" という名称です)。

開発ツールのツールバーの下で、Web コンソールのインターフェイスは 3 つに分けられます:

• ツールバー: 上段に、「ネットワーク」、「CSS」、「JS」 といったボタンを置いているツールバーがあります。このツールバーは、どのようなメッセージを表示するかをフィルタするために使用します。
• コマンドライン: 下段に、JavaScript の式を入力できるコマンドラインがあります。
• メッセージ表示ペイン: ツールバーとコマンドラインの間は、Web コンソールがメッセージを表示する場所です。

メッセージ表示ペイン

Web コンソールのほとんどは、メッセージ表示ペインが占めています:

メッセージ表示ペインでは、以下の種類のメッセージを表示します:

• HTTP リクエスト
• JavaScript の警告とエラー
• CSS の警告、エラー、リフローイベント
• セキュリティの警告とエラー
• console API の呼び出し
• 入力/出力 メッセージ: Web コンソールのコマンドラインからブラウザに送信したコマンドと、その実行結果

それぞれのメッセージは、個別の行に表示します:

デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにコンソールの内容が消去されます。オプションで "ログ出力を残す" にチェックを入れると、この動作が変わります。

HTTP リクエスト

HTTP リクエストは、以下のような行で記録されます:

メッセージをクリックすると、リクエストやレスポンスに関する詳細情報を表示する、以下のようなウィンドウが開きます:

下へスクロールすると、応答ヘッダがあります。デフォルトでは、Web コンソールはリクエストやレスポンスのボディを記録しません: 記録するには、Web コンソールのコンテキストメニューを開き「要求ボディと応答ボディを記録」を選択してください。ページを再読み込みすると、「ネットワーク要求調査」ウィンドウでボディを見ることができます。

リクエストボディとレスポンスボディは、始めの 1 メガバイト分のデータだけが記録されますので、巨大なリクエストやレスポンスのデータは省略されます。

ネットワークのログメッセージはデフォルトで表示されません。表示するには、フィルタリング機能を使用してください。

XHR

Firefox 38 より Web コンソールで、XMLHttpRequest の HTTP リクエストが実行されたときに明示するようになりました:

また Firefox 38 より、XMLHttpRequest のみ表示するようにネットワークリクエストをフィルタリングできます。

通常のネットワークリクエストのメッセージと同様に、XMLHttpRequest のログもデフォルトでは表示しません。表示するには、フィルタリング機能を使用してください。

JavaScript のエラーと警告

JavaScript のメッセージは以下のようなものです:

CSS のエラー、警告、リフローメッセージ

CSS のメッセージは以下のようなものです:

デフォルトでは、CSS の警告およびログメッセージが表示されません。

リフローイベント

Web コンソールは、CSS カテゴリでリフローのイベントも記録します。リフローは、ブラウザがページの全体あるいは一部分のレイアウトを計算する処理に与えられた名称です。レイアウトに影響があるとブラウザが考えるような変化がページで起きたときに、リフローが発生します。以下に挙げるものを含めて、多くのイベントがリフローを発生させます: ブラウザウィンドウのリサイズ、:hover のような疑似クラスのアクティブ化、JavaScript による DOM の操作。

リフローは計算負荷が高い場合があり、またユーザインターフェイスに直接作用するため、Web サイトや Web アプリの応答性に大きな影響を与えることがあります。Web コンソールはリフローイベントを記録することにより、リフローイベントが発生したときの実行にどれだけ時間がかかったか、またリフローが JavaScript によって発生された同期リフローである場合にどのコードが発生させたかの情報を提供します。

リフローイベントは "ログ" メッセージとして、CSS のエラーや警告とは別に記録されます。デフォルトでは、これは無効になっています。有効にするにはツールバーの "CSS" ボタンをクリックして、"ログ" を選択してください。

各々のメッセージは "再描画" というラベルがつき、リフローの実行にかかった時間を表示します:

リフローが JavaScript によって発生された同期リフローである場合は、リフローを発生させたコードの行へのリンクも表示します:

リンクをクリックすると、そのファイルをデバッガで開きます。

同期リフローと非同期リフロー

現在のレイアウトを無効にする変更がなされる、例えばブラウザのウィンドウをリサイズしたりある JavaScript が要素の CSS を変更したりしても、レイアウトが直ちに再計算されるわけではありません。代わりにリフローは非同期に、ブラウザが必要と判断した時点 (通常、ブラウザが次に再描画を行うとき) で実行します。この方法により、ブラウザは無効化する変更点を蓄えておいて一度にそれらの影響を再計算することができます。

しかし、ある JavaScript コードが変更されたスタイルを読み取ると、ブラウザは返す計算値を算出するために同期リフローを実行しなければなりません。例えば以下のようなコードでは、window.getComputedStyle(thing).height を呼び出した時に直ちに同期リフローが発生します:

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

以前のスタイル書き込みによって無効化されたスタイルを読み取るたびに同期リフローを強いるため、DOM の操作中に要素のスタイルの読み書きを挟み込むことを避けるのはよいアイデアです。

セキュリティの警告とエラー

セキュリティの警告とエラーは以下のようなものです:

Web コンソールに表示されるセキュリティメッセージは、サイト内の潜在的あるいは実在の脆弱性を開発者が発見することを支援します。加えて、これらのメッセージの多くは開発者の教育に役立ちます。これは、背景に関する情報や問題を緩和するためのアドバイスを記載したページに案内する、“詳細”リンクが終わりにあるためです。

すべてのセキュリティメッセージの一覧を以下に掲載します:

Bug 863874 は、Web コンソールで適切なセキュリティメッセージを記録することに関するメタバグです。ここで議論されているような役に立つ機能のアイデアがある、あるいは貢献に興味がある場合は、メタバグとその依存関係を確認してください。

console API のメッセージ

ここでは結果を出力する console API の呼び出しについて、Web コンソールへの出力内容を説明します。console API に関するより全般的なドキュメントについては、API のドキュメントのページをご覧ください。

Firefox 40 より Shared Worker、Service Worker、Chrome Worker が発した console メッセージを、Web コンソールで表示できます。これらのメッセージを表示するには、フィルタリングメニューで対応する項目にチェックを入れてください。

エラーメ���セージ

API	メッセージの内容
error()	error() の引数 console.error("an error"); コンソールはエラーのフルスタックトレースを表示します: function error() { console.error("an error"); } function call_error() { error(); } call_error();
exception()	error() のエイリアス
assert()	アサーションが成功した場合は、何も出力しません。アサーションが失敗した場合は、引数を表示します: console.assert(false, "My assertion always fails"); コンソールはアサーションのフルスタックトレースを表示します: function assertion() { console.assert(false, "assertion failed"); } function call_assertion() { assertion(); } call_assertion();

警告メッセージ

API	メッセージの内容
warn()	warn() の引数 console.warn("a warning");

情報メッセージ

API	メッセージの内容
info()	info() の引数 console.info("some info");

ログメッセージ

API	メッセージの内容
count()	ラベルを指定した場合はそのラベル、およびそのラベルを指定して count() が呼び出された回数: console.count(user.value);
dir()	オブジェクトのプロパティを一覧表示 var user = document.getElementById('user'); console.dir(user);
dirxml()	log() の別名。
log()	log() の引数 console.log("logged"); 引数が DOM ノードである場合は、調査が可能な形式で出力します:
table()	表形式のデータをテーブルで表示します。
time()	指定したタイマーが開始したことの通知 console.time("t");
timeEnd()	指定したタイマーの経過時間 console.timeEnd("t");
trace()	スタックトレース console.trace();

メッセージのグループ化

console.group() を使用して、コンソールの出力でインデント付きのグループを作成できます。詳しくはコンソールでのグループの使用をご覧ください。

メッセージのスタイル設定

Firefox 31 より "%c" フォーマット指定子を使用して、コンソールのメッセージにスタイルを設定できます:

console.log("%cMy stylish message", "color: red; font-style: italic");

入力/出力メッセージ

Web コンソールのコマンドラインを使用してブラウザに送信したコマンドとそれに対する応答は、以下のような行で記録されます:

濃い灰色のバーは入力/出力メッセージであることを表し、また三角印の向きで入力と出力を区別します。

フィルタリングと検索

種類でフィルタリング

上段のツールバーで、表示する結果を制限できます。

種類名 ("ネットワーク"、"CSS" など) が記載されたボタンをクリックすると、特定の種類のメッセージのみ表示することができます。ボタン本体をクリックすると、その種類全体のオン/オフを切り替えます。また右側の矢印部分をクリックすると、より細かいフィルタリング方法を表示します (例えば、エラーと警告を表示するか)。

Firefox 40 より、Worker やアドオンが発したメッセージを確認するために "ログ" のフィルタリングオプションを調節できます:

文字列でフィルタリング

"フィルタ出力" と表示されているテキストボックスに文字列を入力すると、その文字列を含むメッセージのみ表示します。

ログを消去する

最後に、このツールバーでログを消去することもできます。

コマンドライン インタプリタ

Web コンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。

式の入力

式の入力方法は、コマンドラインに入力して Enter を押下するだけです。複数行の式を入力する場合は、Enter の代わりに ShiftEnter を使用します。

入力した式をメッセージ表示ウィンドウにエコー出力して、その後に結果を出力します:

変数へのアクセス

ページで定義している変数にアクセスすることができ、window のように組み込み済みの変数と jQuery のように JavaScript で追加した変数のどちらでも可能です:

オートコンプリート

コマンドラインにオートコンプリート機能があります: 最初の数文字を入力すると、考えられる完成形を示すポップアップを表示します:

候補を受け入れるには Enter または Tab を押下します。また上/下矢印キーで別の候補へ移動できます。どの候補も望まない場合は入力を続けてください。

コンソールは、現在実行中のスタックフレームのスコープから候補を提示します。これにより関数内でブレークポイントに当たった場合は、関数内のローカルオブジェクトもオートコンプリートの対象になります。

配列要素向けのオートコンプリート候補も表示します:

変数の定義

独自の変数を定義したり、その変数にアクセスしたりできます:

コマンド履歴

コマンドラインは、あなたが入力したコマンドを覚えています: 上下矢印キーで、履歴を行き来できます。

Firefox 39 より、この履歴はセッションをまたいで維持するようになりました。履歴をクリアするには、clearHistory() 支援コマンドを使用してください。

iframe での作業

ページにインラインフレームを埋め込んでいる場合は、cd() コマンドで特定のインラインフレームにコンソールのスコープを切り替えることができます。また、インラインフレームで表示しているドキュメントで定義した関数を実行できます。cd() でインラインフレームを選択する方法は 3 通りあります:

インラインフレームの DOM 要素を渡すことができます:

var frame = document.getElementById("frame1");
cd(frame);

インラインフレームにマッチする CSS セレクタを渡すことができます:

cd("#frame1");

インラインフレームの window グローバルオブジェクトを渡すことができます:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

トップレベルの window にコンテキストを戻す場合は、引数を与えずに cd() を呼び出してください:

cd();

例えば、インラインフレームを埋め込んだドキュメントがあるものとします:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

インラインフレームで新たな関数を定義しています:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

以下のようにしてコンテキストをインラインフレームに切り替えることができます:

cd("#frame1");

グローバル window の document がインラインフレームであることがわかります:

また、インラインフレーム内で定義した関数を呼び出すことができます:

支援コマンド

Web コンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。

$()

CSS のセレクタ文字列を探索して、最初にマッチした要素を返します。これは document.querySelector() と等価です。または、$ 関数がページ内に存在する場合はそれを呼び出します。

$$()

CSS のセレクタ文字列を探索して、マッチした DOM ノードのリストを返します。これは document.querySelectorAll() のショートカットです。
Firefox 41 より、このメソッドは document.querySelectorAll() のショートカットではなくなり、代わりに要素の配列を返します。

$0

ページ内で現在調査されている要素です。

$_

Firefox 39 の新機能。コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 4 と出力します。

$x()

XPath の構文を評価して、マッチするノードの配列を返します。

keys()

オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは Object.keys のショートカットです。

values()

オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは keys() と対をなすものです。

clear()

コンソールの出力エリアをクリアします。

inspect()

オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクタを開きます。

pprint()

指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。

help()

ヘルプを開きます。実際は再帰の面白い例として、このページへ案内します。

cd()

JavaScript の評価を行うコンテキストを、ページ内の別の iframe に切り替えます。iframe での作業をご覧ください。

copy()

Firefox 38 の新機能。 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの outerHTML をコピーします。他の値である場合は引数に対して JSON.stringify を呼び出して、その結果をコピーします。

clearHistory()

Firefox 39 の新機能。一般的なコマンドラインと同様に、コンソールのコマンドラインも過去に入力したコマンドを覚えています。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。

コンテンツからログを出力する機能について、詳しくは Console API をご覧ください。

高度なオブジェクト出力

Web コンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です:

• 特定の型について追加情報を提供
• オブジェクトのプロパティを詳しく調査
• DOM 要素の詳細情報を提供、およびインスペクタで要素の選択が可能

型に固有の高度な出力

Web コンソールでは以下のように、さまざまなオブジェクト型について高度な情報を提供します:

Object
Array
Date
Promise	Firefox 36 の新機能
RegExp
Window
Document
Element

オブジェクトのプロパティを調査

オブジェクトをコンソールに出力すると、斜体で表示します。それをクリックすると、オブジェクトの詳細情報を表示している新たなパネルが現れます:

Esc を押下すると、このパネルを閉じます。

DOM ノードのハイライト表示と調査

コンソールに出力された DOM 要素にマウスポインタを乗せると、そのノードをページ上でハイライト表示します:

上のスクリーンショットでは、コンソールの出力領域でノードの隣に "標的" のアイコンがあります。このアイコンをクリックすると、そのノードを選択したインスペクタに切り替わります。

コンソールの常時表示

コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに Esc キーまたはツールバーの "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、Web コンソールが下段に表示されます。

通常のコンソールと同様に、$0 はインスペクタで選択している要素のショートハンドとして働きます:

デバッガでコンソールの常時表示を使用するとき、コンソールのスコープは現在実行中のスタックフレームになります。よって関数内でブレークポイントに当たった場合、コンソールのスコープは関数のスコープになります。関数内で定義したオブジェクトのオートコンプリートが可能であり、実行中にそれらを簡単に変更できます:

キーボードショートカット

コマンドラインインタプリタ

これらのショートカットは、コマンドラインインタプリタ内で動作します。

オートコンプリートのポップアップ

これらのショートカットは、オートコンプリートのポップアップを表示しているときに動作します:

共通ショートカット

これらのショートカットは、ツールボックス内の全ツールで動作します。