Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
開発ツール
検索結果

    ブラウザーコンソール

    ブラウザーコンソールは 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 種類の方法で開くことができます:

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

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

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

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

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

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

    ブラウザーコンソールが記録するメッセージの種類は、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

    詳しくはこちら:

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

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

    ブラウザーコンソールのコマンドラインは、デフォルトで無効です。有効化するには 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("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);

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

    タグ: 
     このページの貢献者: SatoshiOhata, yyss, lv7777
     最終更新者: SatoshiOhata,