diff options
Diffstat (limited to 'files/ja/tools/browser_console/index.html')
| -rw-r--r-- | files/ja/tools/browser_console/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
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 +--- +<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> |