ブラウザーコンソール

ブラウザーコンソールは Web コンソール に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。

よって Web コンソールと同じ種類の情報 (ネットワーク要求、JavaScript、CSS、セキュリティのエラーや警告、および JavaScript コードから明示的に出力するメッセージ) を記録します。しかしひとつのコンテンツタブの情報を記録するのではなく、すべてのコンテンツタブ、アドオン、ブラウザー自体のコードの情報を記録します。

アドオンやブラウザーのコードに対して、通常の ツールボックス に含まれる他の ウェブ開発ツールも使用したい場合は、ブラウザーツールボックス の使用を検討してください。

同様に、ブラウザーコンソールで JavaScript の式を実行できます。ただし Web コンソールがページの window スコープ内でコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome ウィンドウのスコープでコードを実行します。これは gBrowser グローバル変数を使用するすべてのブラウザータブと対話できるということであり、またブラウザーのユーザインターフェイスを定義するために使用される XUL との対話も可能です。

ブラウザーコンソールを開く

ブラウザーコンソールは 2 種類の方法で開くことができます:

1. メニューから: Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) の Web 開発サブメニューで "ブラウザーコンソール" を選択します。
2. キーボードで: Ctrl+Shift+J (Mac では Cmd+Shift+J) を押下します。

オプション -jsconsole を渡してコマンドラインから Firefox を起動する方法でも、ブラウザーコンソールを開始できます:

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

ブラウザーコンソールは以下のようなものです:

ブラウザーコンソールの外見や動作は、Web コンソールととても似ていることがわかるでしょう:

• ウィンドウの大部分は、メッセージを表示するペイン が占めています。
• 上段に、表示するメッセージのフィルタリングが可能な ツールバー があります。
• 下段に、JavaScript の式の評価が可能な コマンドラインインタープリター があります。

ブラウザーコンソールのロギング

ブラウザーコンソールが記録するメッセージの種類は、Web コンソールが記録するものと同じです:

• HTTP 要求
• 警告とエラー (JavaScript、CSS、セキュリティの警告やエラー、および console API を使用して JavaScript コードから明示的に記録されるメッセージを含みます)
• 入力/出力メッセージ: コマンドラインからブラウザーに送信したコマンドと、そのコマンドの実行結果

ただし、こちらのメッセージの発信元は以下のとおりです:

• すべてのブラウザータブで提供している ウェブコンテンツ
• ブラウザー自体のコード
• アドオン

アドオン発のメッセージ

ブラウザーコンソールは、すべての Firefox アドオンが出力したメッセージを表示します。

Console.jsm

従来型あるいはブートストラップ型のアドオンから console API を使用するために、Console モジュールから取得します。

Console.jsm からエクスポートされるシンボルは "console" です。以下に、API にアクセスしてブラウザーコンソールにメッセージを出力する方法の例を示します。

Components.utils.import("resource://gre/modules/Console.jsm");
console.log("Hello from Firefox code"); //output messages to the console

詳しくはこちら:

• console API reference
• Console.jsm source code in the Mozilla DXR

HUDService

HUDService でもブラウザーコンソールにアクセスできます。モジュールは Mozilla DXR で確認できます。ブラウザーコンソールだけでなく Web コンソールにもアクセスできることがわかります。

以下は、ブラウザーコンソールの内容を消去する方法の例です:

Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);

ブラウザーコンソールの content ドキュメントにアクセスしたい場合も、HUDService で実現できます。以下の例では、ブラウザーコンソールの "消去" ボタンにマウスポインターを載せたときに、コンソールをクリアするようにしています:

Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();

var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
clearBtn.addEventListener('mouseover', function() {
  hud.jsterm.clearOutput(true);
}, false);

特典機能

Add-on SDK によるアドオンでは、console API が自動的に利用可能になります。ウィジェットをクリックしたときにエラーを出力するアドオンの例を示します:

widget = require("sdk/widget").Widget({
  id: "an-error-happened",
  label: "Error!",
  width: 40,
  content: "Error!",
  onClick: logError
});

function logError() {
  console.error("something went wrong!");
}

このコードを XPI ファイルとして構築して、ブラウザーコンソールを開き、そして XPI ファイルを Firefox で開いてインストールすると、アドオンバーに "Error!" というラベルのウィジェットが現れます:

アイコンをクリックしましょう。すると、ブラウザーコンソールで以下のような出力を確認できるでしょう:

Add-on SDK ベースのアドオンに限りメッセージの先頭にアドオンの名称 ("log-error") が付くため、"フィルター出力" 検索ボックスを使用してこのアドオン由来のメッセージを見つけるのが容易になります。デフォルトではエラーメッセージのみコンソールに記録されますが、ブラウザーの設定でこれを変更できます。

ブラウザーコンソールのコマンドライン

Web コンソールと同様に、コマンドラインインタープリターでリアルタイムに JavaScript 式の評価が可能です:また Web コンソールのコマンドラインと同様に、こちらのコマンドラインもオートコンプリート、履歴、さまざまなキーボードショートカットや支援コマンドをサポートしています。コマンドの実行結果がオブジェクトである場合は、オブジェクトをクリックして詳細を確認できます。

ただし Web コンソールは接続された content window のスコープでコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome window のスコープでコードを実行します。これは window を評価することで確認できます:

これは、ブラウザーを制御できるということです: タブやウィンドウを開くまたは閉じる、開いているコンテンツを変更する、XUL 要素の生成、変更、削除によりブラウザーの UI の変更が可能です。

ブラウザーの制御

コマンドラインインタープリターは gBrowser グローバル変数を通して、tabbrowser オブジェクトにアクセスでき、またコマンドラインを通してブラウザーを制御することが可能です。以下のコードをブラウザーコンソールのコマンドラインで実行してみましょう (ブラウザーコンソールへ複数行送る場合は Shift+Enter を使用することを忘れずに):

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";

これは現在選択しているタブの、新しいページを食べてしまう load イベントのリスナーを追加してから、新しいページを読み込みます。

ブラウザー UI の変更

グローバルの window オブジェクトはブラウザーの chrome window であるため、ブラウザーのユーザーインターフェイスを変更できます。Windows では、以下のコードでブラウザーのメインメニューに新たなアイテムを追加します:

var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);

OS X では、前出のコードに似ている以下のコードで "ツール" メニューに新たなアイテムを追加します:

var parent = window.document.getElementById("menu_ToolsPopup");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);