{{ToolsSidebar}}
ブラウザーコンソールは Web コンソール に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。
よって Web コンソールと同じ種類の情報 (ネットワーク要求、JavaScript、CSS、セキュリティのエラーや警告、および JavaScript コードから明示的に出力するメッセージ) を記録します。しかしひとつのコンテンツタブの情報を記録するのではなく、すべてのコンテンツタブ、アドオン、ブラウザー自体のコードの情報を記録します。
アドオンやブラウザーのコードに対して、通常の ツールボックス に含まれる他の ウェブ開発ツールも使用したい場合は、ブラウザーツールボックス の使用を検討してください。
同様に、ブラウザーコンソールで JavaScript の式を実行できます。ただし Web コンソールがページの window スコープ内でコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome ウィンドウのスコープでコードを実行します。これは gBrowser グローバル変数を使用するすべてのブラウザータブと対話できるということであり、またブラウザーのユーザインターフェイスを定義するために使用される XUL との対話も可能です。
注意: ブラウザーコンソールの (JavaScript の式を実行するための) コマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 devtools.chrome.enabled を true にするか、開発ツールのオプション で "ブラウザーとアドオンのデバッガーを有効" (Firefox 40 以降) / "ブラウザーデバッガーを有効" (Firefox 38.0.5 以前) を有効にしてください。
ブラウザーコンソールは 2 種類の方法で開くことができます:
オプション -jsconsole を渡してコマンドラインから Firefox を起動する方法でも、ブラウザーコンソールを開始できます:
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
ブラウザーコンソールは以下のようなものです:
ブラウザーコンソールの外見や動作は、Web コンソールととても似ていることがわかるでしょう:
ブラウザーコンソールが記録するメッセージの種類は、Web コンソールが記録するものと同じです:
ただし、こちらのメッセージの発信元は以下のとおりです:
ブラウザーコンソールは、すべての Firefox アドオンが出力したメッセージを表示します。
従来型あるいはブートストラップ型のアドオンから 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
詳しくはこちら:
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") が付くため、"フィルター出力" 検索ボックスを使用してこのアドオン由来のメッセージを見つけるのが容易になります。デフォルトではエラーメッセージのみコンソールに記録されますが、ブラウザーの設定でこれを変更できます。
ブラウザーコンソールのコマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 devtools.chrome.enabled を true にするか、開発ツールのオプションで "ブラウザデバッガーを有効" を有効にしてください。
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 イベントのリスナーを追加してから、新しいページを読み込みます。
グローバルの window オブジェクトはブラウザーの chrome window であるため、ブラウザーのユーザーインターフェイスを変更できます。Windows では、以下のコードでブラウザーのメインメニューに新たなアイテムを追加します:
var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://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("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);
