From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/tools/browser_console/index.html | 179 ++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/ja/tools/browser_console/index.html (limited to 'files/ja/tools/browser_console') diff --git a/files/ja/tools/browser_console/index.html b/files/ja/tools/browser_console/index.html new file mode 100644 index 0000000000..12b87526ca --- /dev/null +++ b/files/ja/tools/browser_console/index.html @@ -0,0 +1,179 @@ +--- +title: ブラウザーコンソール +slug: Tools/Browser_Console +tags: + - Web Development + - 'WebDevelopment:Tools' + - ツール + - デバッグ + - ブラウザ +translation_of: Tools/Browser_Console +--- +

{{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 種類の方法で開くことができます:

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

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

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

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

+ +

+ +

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

+ + + +

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

+ +

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

+ + + +

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

+ + + +

アドオン発のメッセージ

+ +

ブラウザーコンソールは、すべての 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("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);
+ +

-- cgit v1.2.3-54-g00ecf