1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: ブラウザーコンソール
slug: Tools/Browser_Console
tags:
- Web Development
- 'WebDevelopment:Tools'
- ツール
- デバッグ
- ブラウザ
translation_of: Tools/Browser_Console
---
<p>{{ToolsSidebar}}</p>
<p>ブラウザーコンソールは <a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">Web コンソール </a>に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。</p>
<p>よって Web コンソールと同じ種類の情報 (ネットワーク要求、JavaScript、CSS、セキュリティのエラーや警告、および JavaScript コードから明示的に出力するメッセージ) を記録します。しかしひとつのコンテンツタブの情報を記録するのではなく、すべてのコンテンツタブ、アドオン、ブラウザー自体のコードの情報を記録します。</p>
<p>アドオンやブラウザーのコードに対して、通常の<a href="/ja/docs/Tools/Tools_Toolbox"> ツールボックス </a>に含まれる他の ウェブ開発ツールも使用したい場合は、<a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス </a>の使用を検討してください。</p>
<p>同様に、ブラウザーコンソールで JavaScript の式を実行できます。ただし Web コンソールがページの window スコープ内でコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome ウィンドウのスコープでコードを実行します。これは <a href="/ja/docs/Code_snippets/Tabbed_browser" title="Code_snippets/Tabbed_browser"><code>gBrowser</code></a> グローバル変数を使用するすべてのブラウザータブと対話できるということであり、またブラウザーのユーザインターフェイスを定義するために使用される XUL との対話も可能です。</p>
<div class="geckoVersionNote">
<p>注意: ブラウザーコンソールの (JavaScript の式を実行するための) コマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 <code>devtools.chrome.enabled</code> を <code>true</code> にするか、<a href="/ja/docs/Tools/Settings">開発ツールのオプション</a> で "ブラウザーとアドオンのデバッガーを有効" (Firefox 40 以降) / "ブラウザーデバッガーを有効" (Firefox 38.0.5 以前) を有効にしてください。</p>
</div>
<h2 id="Opening_the_Browser_Console" name="Opening_the_Browser_Console">ブラウザーコンソールを開く</h2>
<p>ブラウザーコンソールは 2 種類の方法で開くことができます:</p>
<ol>
<li>メニューから: Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) の Web 開発サブメニューで "ブラウザーコンソール" を選択します。</li>
<li>キーボードで: Ctrl+Shift+J (Mac では Cmd+Shift+J) を押下します。</li>
</ol>
<p>オプション <code>-jsconsole</code> を渡してコマンドラインから Firefox を起動する方法でも、ブラウザーコンソールを開始できます:</p>
<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
<p>ブラウザーコンソールは以下のようなものです:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>ブラウザーコンソールの外見や動作は、<a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">Web コンソール</a>ととても似ていることがわかるでしょう:</p>
<ul>
<li>ウィンドウの大部分は、<a href="/ja/docs/Tools/Web_Console#Message_Display_Pane" title="Tools/Web_Console#Message_Display_Pane">メッセージを表示するペイン</a> が占めています。</li>
<li>上段に、表示するメッセージのフィルタリングが可能な <a href="/ja/docs/Tools/Web_Console#Filtering_and_searching" title="Tools/Web_Console#Filtering_and_searching">ツールバー </a>があります。</li>
<li>下段に、JavaScript の式の評価が可能な <a href="/ja/docs/Tools/Web_Console#The_command_line_interpreter" title="Tools/Web_Console#The_command_line_interpreter">コマンドラインインタープリター </a>があります。</li>
</ul>
<h2 id="Browser_Console_logging" name="Browser_Console_logging">ブラウザーコンソールのロギング</h2>
<p>ブラウザーコンソールが記録するメッセージの種類は、Web コンソールが記録するものと同じです:</p>
<ul>
<li><a href="/ja/docs/Tools/Web_Console#HTTP_requests" title="Tools/Web_Console#HTTP_requests">HTTP 要求</a></li>
<li><a href="/ja/docs/Tools/Web_Console#Warnings_and_errors" title="Tools/Web_Console#Warnings_and_errors">警告とエラー</a> (JavaScript、CSS、セキュリティの警告やエラー、および <a href="https://developer.mozilla.org/ja/docs/Web/API/console" title="Web/API/console">console</a> API を使用して JavaScript コードから明示的に記録されるメッセージを含みます)</li>
<li><a href="/ja/docs/Tools/Web_Console#Input.2Foutput_messages" title="Tools/Web_Console#Input.2Foutput_messages">入力/出力メッセージ</a>: コマンドラインからブラウザーに送信したコマンドと、そのコマンドの実行結果</li>
</ul>
<p>ただし、こちらのメッセージの発信元は以下のとおりです:</p>
<ul>
<li>すべてのブラウザータブで提供している ウェブコンテンツ</li>
<li>ブラウザー自体のコード</li>
<li>アドオン</li>
</ul>
<h3 id="Messages_from_add-ons" name="Messages_from_add-ons">アドオン発のメッセージ</h3>
<p>ブラウザーコンソールは、すべての Firefox アドオンが出力したメッセージを表示します。</p>
<h4 id="Console.jsm" name="Console.jsm">Console.jsm</h4>
<p>従来型あるいはブートストラップ型のアドオンから console API を使用するために、Console モジュールから取得します。</p>
<p>Console.jsm からエクスポートされるシンボルは "console" です。以下に、API にアクセスしてブラウザーコンソールにメッセージを出力する方法の例を示します。</p>
<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm");
console.log("Hello from Firefox code"); //output messages to the console</pre>
<p>詳しくはこちら:</p>
<ul>
<li><a href="/ja/docs/Web/API/console">console API reference</a></li>
<li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li>
</ul>
<h4 id="HUDService" name="HUDService">HUDService</h4>
<p>HUDService でもブラウザーコンソールにアクセスできます。モジュールは <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a> で確認できます。ブラウザーコンソールだけでなく Web コンソールにもアクセスできることがわかります。</p>
<p>以下は、ブラウザーコンソールの内容を消去する方法の例です:</p>
<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");
var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);</pre>
<p>ブラウザーコンソールの content ドキュメントにアクセスしたい場合も、HUDService で実現できます。以下の例では、ブラウザーコンソールの "消去" ボタンにマウスポインターを載せたときに、コンソールをクリアするようにしています:</p>
<pre class="brush: js">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);</pre>
<h4 id="Bonus_Features_Available" name="Bonus_Features_Available">特典機能</h4>
<p><a href="/ja/docs/Mozilla/Add-ons/SDK" title="/ja/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> によるアドオンでは、console API が自動的に利用可能になります。ウィジェットをクリックしたときにエラーを出力するアドオンの例を示します:</p>
<pre class="brush: js">widget = require("sdk/widget").Widget({
id: "an-error-happened",
label: "Error!",
width: 40,
content: "Error!",
onClick: logError
});
function logError() {
console.error("something went wrong!");
}</pre>
<p>このコードを <a href="/ja/docs/Mozilla/Add-ons/SDK/チュートリアル/Installation" title="/ja/docs/Mozilla/Add-ons/SDK/チュートリアル/Installation">XPI ファイルとして構築</a>して、ブラウザーコンソールを開き、そして XPI ファイルを Firefox で開いてインストールすると、アドオンバーに "Error!" というラベルのウィジェットが現れます:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">アイコンをクリックしましょう。すると、ブラウザーコンソールで以下のような出力を確認できるでしょう:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Add-on SDK ベースのアドオンに限りメッセージの先頭にアドオンの名称 ("log-error") が付くため、<a href="/ja/docs/Tools/Web_Console#Filtering_and_searching" title="Tools/Web_Console#Filtering_and_searching">"フィルター出力"</a> 検索ボックスを使用してこのアドオン由来のメッセージを見つけるのが容易になります。デフォルトではエラーメッセージのみコンソールに記録されますが、<a href="/ja/Add-ons/SDK/Tools/console#Logging_Levels" title="/ja/Add-ons/SDK/Tools/console#Logging_Levels">ブラウザーの設定でこれを変更できます</a>。</p>
<h2 id="Browser_Console_command_line" name="Browser_Console_command_line">ブラウザーコンソールのコマンドライン</h2>
<div class="geckoVersionNote">
<p>ブラウザーコンソールのコマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 <code>devtools.chrome.enabled</code> を <code>true</code> にするか、<a href="/ja/docs/Tools/Settings">開発ツールのオプション</a>で "ブラウザデバッガーを有効" を有効にしてください。</p>
</div>
<p>Web コンソールと同様に、コマンドラインインタープリターでリアルタイムに JavaScript 式の評価が可能です:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">また Web コンソールのコマンドラインと同様に、こちらのコマンドラインも<a href="/ja/docs/Tools/Web_Console#Autocomplete" title="Tools/Web_Console#Autocomplete">オートコンプリート</a>、<a href="/ja/docs/Tools/Web_Console#Command_history" title="Tools/Web_Console#Command_history">履歴</a>、さまざまな<a href="/ja/docs/Tools/Web_Console#Keyboard_shortcuts" title="Tools/Web_Console#Keyboard_shortcuts">キーボードショートカット</a>や<a href="/ja/docs/Tools/Web_Console#Helper_commands" title="Tools/Web_Console#Helper_commands">支援コマンド</a>をサポートしています。コマンドの実行結果がオブジェクトである場合は、<a href="/ja/docs/Tools/Web_Console#Inspecting_objects" title="Tools/Web_Console#Inspecting_objects">オブジェクトをクリックして詳細を確認できます</a>。</p>
<p>ただし Web コンソールは接続された content window のスコープでコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome window のスコープでコードを実行します。これは <code>window</code> を評価することで確認できます:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>これは、ブラウザーを制御できるということです: タブやウィンドウを開くまたは閉じる、開いているコンテンツを変更する、XUL 要素の生成、変更、削除によりブラウザーの UI の変更が可能です。</p>
<h3 id="Controlling_the_browser" name="Controlling_the_browser">ブラウザーの制御</h3>
<p>コマンドラインインタープリターは <code>gBrowser</code> グローバル変数を通して、<a href="/ja/docs/XUL/tabbrowser" title="XUL/tabbrowser"><code>tabbrowser</code></a> オブジェクトにアクセスでき、またコマンドラインを通してブラウザーを制御することが可能です。以下のコードをブラウザーコンソールのコマンドラインで実行してみましょう (ブラウザーコンソールへ複数行送る場合は Shift+Enter を使用することを忘れずに):</p>
<pre class="brush: js">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/";</pre>
<p>これは現在選択しているタブの、新しいページを食べてしまう <code>load</code> イベントのリスナーを追加してから、新しいページを読み込みます。</p>
<h3 id="Modifying_the_browser_UI" name="Modifying_the_browser_UI">ブラウザー UI の変更</h3>
<p>グローバルの <code>window</code> オブジェクトはブラウザーの chrome window であるため、ブラウザーのユーザーインターフェイスを変更できます。Windows では、以下のコードでブラウザーのメインメニューに新たなアイテムを追加します:</p>
<pre class="brush: js">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);</pre>
<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">OS X では、前出のコードに似ている以下のコードで "ツール" メニューに新たなアイテムを追加します:</p>
<pre class="brush: js">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);</pre>
<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
|
