path: root/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html

---
title: デバッグ (Firefox 50 より前)
slug: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50)
tags:
  - Debugging
  - Firefox
  - Guide
  - Mozilla
  - Deprecated
  - WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50)
---
<div>{{AddonSidebar}}</div>

<div class="notecard note">
<p>この記事では Firefox バージョン 50 よりも前で WebExtension API を使った拡張機能のデバッグする方法を説明しています。</p>

<p>Firefox 50 以降をお使いの場合、<a href="https://extensionworkshop.com/documentation/develop/debugging/">メイン記事の拡張機能をデバッグする</a>を見てください。</p>
</div>

<p>この記事では、既定でインストールされている Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。Add-on SDK で開発したアドオンをデバッグする場合は、<a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガー</a> の解説を参照してください。</p>

<h2 id="A_simple_example_notify-link-clicks-i18n">簡単なサンプル: notify-link-clicks-i18n</h2>

<p>デバッグツールへの接続方法を、簡単なサンプル拡張機能 "notify-link-clicks-i18n" を用いて説明します。このコードは <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">GitHub の Extensions examples リポジトリ</a> で公開されています。</p>

<p>この拡張機能は以下から構成されています。</p>

<ul>
 <li>バックグラウンドスクリプト "background-script.js"</li>
 <li>コンテンツスクリプト "content-script.js" （全てのページに読み込まれるスクリプト）</li>
</ul>

<p>ページ上のリンクをクリックするという動作は、コンテンツスクリプトがイベントとして感知します。リンクがクリックされた際、リンクを含んだメッセージがコンテンツスクリプトからバックグラウンドスクリプトに送られます。</p>

<p>バックグラウンドスクリプトがメッセージを受け取ると、リンクを含んだ通知画面が表示されます。</p>

<p>"content-script.js" は次の通りです。</p>

<pre class="brush: js">/*
リンクがクリックされた場合、バックグラウンドページにメッセージを送信する。
このメッセージにはリンクの URL が含まれている。
*/
function notifyExtension(e) {
  var target = e.target;
  while ((target.tagName != "A" || !target.href) &amp;&amp; target.parentNode) {
    target = target.parentNode;
  }
  if (target.tagName != "A")
    return;

  console.log("content script sending message");
  chrome.runtime.sendMessage({"url": target.href});
}

/*
 クリックイベントのリスナー関数に notifyExtension() を追加する
*/
window.addEventListener("click", notifyExtension);
</pre>

<p>"background-script.js" は次の通りです。</p>

<pre class="brush: js">/*
 受信したメッセージを記録する。
 続いて通知画面を表示する。
 この通知画面には、メッセージから読み取った URL が含まれている。
*/
function notify(message) {
  console.log("background script received message");
  var title = chrome.i18n.getMessage("notificationTitle");
  var content = chrome.i18n.getMessage("notificationContent", message.url);
  chrome.notifications.create({
    "type": "basic",
    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
    "title": title,
    "message": content
  });
}

/*
 content script からのメッセージを受信するリスナ関数に `notify()` を追加する
*/
chrome.runtime.onMessage.addListener(notify);
</pre>

<p>以下の手順を実際に試してみる際は、 <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリからコードを clone し、"notify-link-clicks-i18n" を<a href="/ja/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox"> インストールしてください</a>。</p>

<h2 id="The_Browser_Toolbox">ブラウザーツールボックス</h2>

<p>拡張機能をデバッグするには <a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス</a> を使用します。</p>

<h3 id="Prerequisites">前提条件</h3>

<p>ブラウザーツールボックスを使用する準備として、以下の手順を踏む必要があります。</p>

<ul>
 <li>Firefox 開発ツールを開く (Shift+Ctrl+I / F12)</li>
 <li><a href="/ja/docs/Tools/Settings">設定</a> タブ（歯車のアイコン）を開く</li>
 <li>"詳細な設定" において下記の設定項目にチェックが入っているか確認する。
  <ul>
   <li><em>ブラウザーとアドオンのデバッガーを有効</em></li>
   <li><em>リモートデバッグを有効</em></li>
  </ul>
 </li>
</ul>

<p>{{EmbedYouTube("LJAM2vXJ790")}}</p>

<h3 id="Opening_the_Browser_Toolbox">ブラウザーツールボックスを開く</h3>

<p>次に、ブラウザーツールボックスを開きます。</p>

<ul>
 <li>Firefox のウェブ開発者メニューを開き、「ブラウザーツールボックス」を選択してください。 (注: 「ブラウザーコンソール」では<em>ありません</em>。)</li>
 <li>警告ダイアログが出るかもしれませんが OK を押してください。</li>
</ul>

<p>ブラウザーツールボックスが新しいウインドウとして開きます。ここで Firefox のメインウィンドウが前面に表示された場合は、ブラウザーツールボックスが前に表示されるように画面をクリックしてください。</p>

<p>{{EmbedYouTube("fZ492zAAy3o")}}</p>

<p>Firefox における "ツールボックス" とは、下図のように複数のツールがタブで区切られているウインドウの名前です。</p>

<p><img alt="" src="browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">上記のツールボックスには 5 つのツール、"Inspector" / "Console" / "Debugger" / "Style Editor" / "Scratchpad" が含まれており、ウインドウの上部にあるタブで切り替えることができます。この記事では "Console（コンソール）" と "Debugger（デバッガー）" の 2 つのツールを使用します。</p>

<h3 id="Viewing_log_output">ログの出力を見る</h3>

<p>コンソールタブでログを見ることができます。ここに表示されるメッセージは以下から出力されたものです。</p>

<ul>
 <li>バックグラウンドスクリプト</li>
 <li>ポップアップの中で動作しているスクリプト</li>
 <li>コンテンツスクリプト</li>
</ul>

<p>このメッセージには、<a href="/ja/docs/Web/API/console">Console API</a> を使用しているコードから出力されたログも含まれています。また、JavaScript エンジンからもエラーメッセージが出力されます。</p>

<p>それでは上記のサンプルを使って試してみましょう。ブラウザーツールボックスのコンソールタブを選択し、何かしらの Web ページを開き、リンクをクリックし、コンテンツスクリプトやバックグラウンドスクリプトからメッセージが記録されるのを確認してみましょう。</p>

<p>{{EmbedYouTube("Qpx0n8gP3Qw")}}</p>

<p>ただし、ブラウザーツールボックスはどんなメッセージも受け取るため、要らないメッセージも多く受け取ってしまう問題があります。この問題を解決するには<a href="/ja/docs/Tools/Web_Console/Console_messages#filtering_and_searching">フィルタリングと検索</a>を参照してください。</p>

<h3 id="Debugging_JavaScript">JavaScript をデバッグする</h3>

<p>ブラウザーツールボックスを用いると、バックグラウンドスクリプトやブラウーザ上で動作しているスクリプト、ポップアップのページアクションで動作するスクリプトに対し、 JavaScript デバッガーでブレークポイントを設定することができます。</p>

<p>拡張機能がインストールされて有効になっていれば、デバッガーでバックグラウンドスクリプトにアクセスできます。ポップアップスクリプトは、ポップアップが表示されている間だけ見ることができます。ポップアップスクリプトが読み込まれた時点ですぐにデバッガーからアクセスしたい場合は、スクリプトの最初に <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> 文を挿入してみてください。</p>

<p>JavaScript デバッガーを使用するには、まずはブラウザーツールボックスのデバッガータブを選択してください。そこにはブラウザーで動いている全てのソースコードが表示されていますので、<a href="/ja/docs/Tools/Debugger/How_to/Search">検索ボックスをクリックしてソースの名前を入力し</a>、自分の拡張機能のコードを探してください。</p>

<p>自分のソースを見つかったら、ブレークポイントをコードに設定したり、コードをステップ実行したり、<a href="/ja/docs/Tools/Debugger">他にもデバッガーに可能なことは何でも実行できます</a>。</p>

<p>{{EmbedYouTube("3edeJiG38ZA")}}</p>

<h3 id="JavaScript_command_line_interpreter">JavaScript コマンドラインインタープリター</h3>

<p>コンソールには <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタープリター</a> が含まれており、実行しているプログラムの状態を調べたり操作することができます。この機能はコンソールをウェブページに接続されている場合によく使いますが、ブラウザーツールボックスでは、コンソールのスコープが、デバッグしようとしている特定の拡張機能ではなく、ブラウザー全体になるため、一般的に使用することが難しくなります。</p>

<p>とはいえ、そんな時に役立つコツがあります。デバッガーがブレークポイントで一時停止している間、コンソールのスコープは、デバッガーが一時停止しているプログラムの位置でのスコープになります。そのため、拡張機能のコードでブレークポイントに当たると、拡張機能の関数を呼び出したり、変数の値を再設定したりといった具合に、拡張機能と直接やりとりすることができます。</p>

<p>この機能は特に、<a href="/ja/docs/Tools/Web_Console/Split_console">分割コンソール</a>機能と組み合わせると役立ちます。これによってツールボックスを半分に分割することができます。半分はコンソールになり、もう半分は別なコンソールになります (この場合は JavaScript デバッガーです)。</p>

<p>{{EmbedYouTube("xprf58qOtLY")}}</p>

<h3 id="Debugging_content_scripts">コンテンツスクリプトのデバッグ</h3>

<p>ブラウザーツールボックスには大きな制約が 1 つあります。それは、<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> で開発している場合に、 JavaScript Debugger からコンテンツスクリプトにアタッチできない点です。</p>

<p>マルチプロセス Firefox では 2 つ (以上) のプロセスに分かれています。ブラウザー自身の UI やシステムコードを実行するプロセスと、ウェブページから読み込まれたスクリプトを実行する 1 つ (または複数) の<em>コンテンツプロセス</em>がです。ブラウザーツールボックスは、これらのプロセスのうち、最初のプロセスに接続されます。しかし、コンテンツスクリプトはコンテンツプロセスで実行されるため、ブラウザーツールボックスのソースリストには表示されません。</p>

<p>コンテンツスクリプトスクリプトをマルチプロセス Firefox でデバッグする場合は、 Browser Content Toolbox を使用してください。 Browser Content Toolbox はブラウザーツールボックスによく似ていますが、開発ツールをブラウザーのコンテンツプロセスにアタッチさせる点で異なり、コンテンツスクリプトにアクセスできるようになります。</p>

<p>コンテンツスクリプトは、ロードされるまでソースリストに表示されないことに注意してください。読み込み後すぐにアクセスする必要がある場合は、スクリプトの先頭に <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> 文を追加してみてください。</p>

<div class="note">
<p>補足: この Browser Content Toolbox は、マルチプロセス Firefox で開発している場合にのみ必要なものであり、またその場合のみ利用可能です。</p>
</div>

<div class="notecard warning">
<p>ツールボックスのオプションでワーカーのデバッグを有効にすると、 Browser Content Toolbox でのデバッグができなくなります (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1236892">Bug 1236892</a>)。</p>
</div>

<p>{{EmbedYouTube("xAt3Q0PgJP4")}}</p>

<h3 id="Debugging_popups">ポップアップのデバッグ</h3>

<div class="blockIndicator geckoVersionNote">Firefox 47 の新機能</div>

<p>Firefox 47 から、ブラウザーツールボックスでポップアップの中身をデバッグできるようになりました。デバッグは 3 つの手順からなります。</p>

<ul>
 <li>パネルの autohide を無効化する</li>
 <li>ポップアップを開く</li>
 <li>ポップアップを含んだ文書を選択する</li>
</ul>

<p>{{EmbedYouTube("EEU4NeAS1s4")}}</p>

<h4 id="Disable_autohide">autohide を無効化する</h4>

<p>パネルのデバッグに関してありがちな問題は、パネルの外をクリックすると隠れてしまう点です。そのため、まず初めにこの動作を無効化しておきましょう。ブラウザーツールボックスで 4 つの小さい四角形からなるアイコンをクリックします。</p>

<p><img alt="" src="disable-autohide.png" style="display: block; margin-left: auto; margin-right: auto;">すると、 Esc キーを押した場合でもパネルが前面に表示されたままになるはずです。</p>

<div class="notecard note">
<p>ここで設定した authohide の無効化は、拡張機能のポップアップだけでなく、 <a href="/ja/docs/Tools/Browser_Toolbox#debugging_popups">ブラウザー本体のポップアップ</a> (ハンバーガーメニュー <img alt="" src="hamburger.png" style="display: inline-block; vertical-align: middle;"> など) にも適用されます。</p>

<p>また、この設定はブラウザーを再起動した後も引き継がれます。この件に関しては <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251658">bug 1251658</a> で修正中ですが、現時点ではブラウザーツールボックスを閉じる前に autohide を再び有効にしておくと良いでしょう。</p>

<p>ブラウザーの内部構造的には、この autohide ボタンは <code>ui.popup.disable_autohide</code> の設定項目を切り替えるだけのものです。そのため、about:config において手動で切り替えることも可能です。</p>
</div>

<h4 id="Open_the_popup">ポップアップを開く</h4>

<p>次にポップアップを開きます。ここでブラウザーツールボックスに戻ると、パネルが開いたままになっているはずです。</p>

<h4 id="Select_the_popup's_frame">ポップアップのフレームを選択する</h4>

<p>ポップアップはそれ自身のフレームに読み込まれています。そのため、ブラウザーツールボックスの <a href="/ja/docs/Tools/Browser_Toolbox#targeting_a_document">フレーム選択ボタン</a> でポップアップのドキュメントを選択します。<img alt="" src="frame-selection.png" style="display: block; margin-left: auto; margin-right: auto;">このドキュメントは以下のような名前を持っています。</p>

<pre>moz-extension://&lt;some-uuid&gt;/path/to/your-popup.html</pre>

<p>{{EmbedYouTube("9jdHDCKIN-U")}}</p>

<p>こうしてツールボックスのスコープがポップアップに設定されました。インスペクタでポップアップの HTML や CSS の確認・変更が行えます。デバッガーでは、ポップアップに読み込まれているスクリプトを検索したり、スクリプトにブレークポイントを設定することができます。</p>

<h2 id="What_about_the_Add-on_Debugger">Add-on Debuggerとは</h2>

<p>Firefox での拡張機能のデバッグは、今後 <a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> が用いられる予定になっています。</p>

<p>ブラウザーツールボックスと比較した際、 <a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> は拡張機能ファイルのみを表示するため、容易にスクリプトを探すことができるという大きな利点があります。しかし今のところ、コンソールメッセージを拡張機能から Add-on Debugger へ表示させられないため、ブラウザーツールボックスのほうが便利です。</p>