The Wayback Machine - https://web.archive.org/web/20150906113643/https://developer.mozilla.org/ja/docs/Tools/Browser_Console
開発ツール
Your Search Results

    ブラウザコンソール

    by 1 contributor:

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

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

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

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

    注意: Firefox 30 より、ブラウザコンソールの (JavaScript の式を実行するための) コマンドラインはデフォルトで無効になりました。有効化するには about:config で設定項目 devtools.chrome.enabled を true にするか、開発ツールのオプションで "ブラウザデバッガを有効" を有効にしてください。

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

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

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

    Firefox 38 より前のバージョンでは、ブラウザコンソールが Firefox のウィンドウの陰にある状態で再びメニューまたはキーボードショートカットでブラウザコンソールを選択すると、コンソールが閉じますので注意してください。Firefox 38 よりブラウザコンソールにフォーカスを切り替えるようになり、より望まれているであろう動作になりました。

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

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

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

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

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

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

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

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

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

    アドオン発のメッセージ

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

    Console.jsm

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

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

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

    詳しくはこちら:

    HUDService

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

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

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

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

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

    Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
var HUDService = devtools.require("devtools/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") が付くため、"フィルタ出力" 検索ボックスを使用してこのアドオン由来のメッセージを見つけるのが容易になります。デフォルトではエラーメッセージのみコンソールに記録されますが、ブラウザの設定でこれを変更できます。

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

    Firefox 30 より、ブラウザコンソールのコマンドラインはデフォルトで無効になります。有効化するには 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 イベントのリスナを追加してから、新しいページを読み込みます。

    ブラウザ UI の変更

    グローバルの 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);

    ドキュメントのタグと貢献者

    タグ: 
    Contributors to this page: yyss
    最終更新者: yyss,