Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) を更新 (#976)

- 英語版章題マクロを削除
- 2021/03/18 時点の英語版に同期

1 files changed, 79 insertions, 89 deletions

diff --git a/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html b/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html
index 0a9d5e2637..cfe25bfc3f 100644
--- a/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html
+++ b/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html
@@ -1,26 +1,28 @@
 ---
 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="note">
-<p>この記事では Firefox バージョン50よりも前で WebExtension API を使った拡張機能のデバッグする方法を説明しています。</p>
+<div class="notecard note">
+<p>この記事では Firefox バージョン 50 よりも前で WebExtension API を使った拡張機能のデバッグする方法を説明しています。</p>
 
-<p>Firefox 50 以降をお使いの場合、<a href="/ja/Add-ons/WebExtensions/Debugging">メイン記事の拡張機能をデバッグする</a>を見てください。</p>
+<p>Firefox 50 以降をお使いの場合、<a href="https://extensionworkshop.com/documentation/develop/debugging/">メイン記事の拡張機能をデバッグする</a>を見てください。</p>
 </div>
 
-<p>この記事では、デフォルトでインストールされている Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。Add-on SDK で開発したアドオンをデバッグする場合は、<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガ</a> の解説を参照してください。</p>
-
-<p>{{英語版章題("A simple example: notify-link-clicks-i18n")}}</p>
+<p>この記事では、既定でインストールされている Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。Add-on SDK で開発したアドオンをデバッグする場合は、<a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガー</a> の解説を参照してください。</p>
 
-<ul>
-</ul>
+<h2 id="A_simple_example_notify-link-clicks-i18n">簡単なサンプル: notify-link-clicks-i18n</h2>
 
-<h2 id="簡単なサンプル_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 の WebExtensions examples リポジトリ</a> で公開されています。</p>
+<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>
 
@@ -29,15 +31,15 @@ translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50)
  <li>コンテンツスクリプト "content-script.js" （全てのページに読み込まれるスクリプト）</li>
 </ul>
 
-<p>ページ上のリンクをクリックするという動作は、コンテンツスクリプトがイベントとして感知します。リンクがクリックされた際、 リンクを含んだメッセージがコンテンツスクリプトからバックグラウンドスクリプトに送られます。</p>
+<p>ページ上のリンクをクリックするという動作は、コンテンツスクリプトがイベントとして感知します。リンクがクリックされた際、リンクを含んだメッセージがコンテンツスクリプトからバックグラウンドスクリプトに送られます。</p>
 
 <p>バックグラウンドスクリプトがメッセージを受け取ると、リンクを含んだ通知画面が表示されます。</p>
 
-<p>"content-script.js" は次の通りです:</p>
+<p>"content-script.js" は次の通りです。</p>
 
 <pre class="brush: js">/*
- <code class="language-js"><span class="comment token">リンクがクリックされた場合、バックグラウンドページにメッセージを送信する。
- このメッセージにはリンクの URL が含まれている。</span></code>
+リンクがクリックされた場合、バックグラウンドページにメッセージを送信する。
+このメッセージにはリンクの URL が含まれている。
 */
 function notifyExtension(e) {
   var target = e.target;
@@ -52,17 +54,17 @@ function notifyExtension(e) {
 }
 
 /*
- <code class="language-js"><span class="comment token">クリックイベントのリスナ関数に notifyExtension() を追加する</span></code>
+ クリックイベントのリスナー関数に notifyExtension() を追加する
 */
 window.addEventListener("click", notifyExtension);
 </pre>
 
-<p>"background-script.js" は次の通りです:</p>
+<p>"background-script.js" は次の通りです。</p>
 
 <pre class="brush: js">/*
- <code class="language-js"><span class="comment token">受信したメッセージを記録する。
+ 受信したメッセージを記録する。
  続いて通知画面を表示する。
- この通知画面には、メッセージから読み取った URL が含まれている。</span></code>
+ この通知画面には、メッセージから読み取った URL が含まれている。
 */
 function notify(message) {
   console.log("background script received message");
@@ -77,31 +79,27 @@ function notify(message) {
 }
 
 /*
- <code class="language-js"><span class="comment token">content script からのメッセージを受信するリスナ関数に `notify()` を追加する</span></code>
+ 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/Add-ons/WebExtensions/Packaging_and_installation"> インストールして下さい</a>。</p>
-
-<p>{{英語版章題("The Browser Toolbox")}}</p>
-
-<h2 id="ブラウザツールボックス">ブラウザツールボックス</h2>
+<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>
 
-<p>拡張機能をデバッグするには <a href="/ja/docs/Tools/Browser_Toolbox">ブラウザツールボックス</a> を使用します。</p>
+<h2 id="The_Browser_Toolbox">ブラウザーツールボックス</h2>
 
-<p>{{英語版章題("Prerequisites")}}</p>
+<p>拡張機能をデバッグするには <a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス</a> を使用します。</p>
 
-<h3 id="前提条件">前提条件</h3>
+<h3 id="Prerequisites">前提条件</h3>
 
-<p>ブラウザツールボックスを使用する準備として、以下の手順を踏む必要があります。</p>
+<p>ブラウザーツールボックスを使用する準備として、以下の手順を踏む必要があります。</p>
 
 <ul>
  <li>Firefox 開発ツールを開く (Shift+Ctrl+I / F12)</li>
- <li><a href="https://developer.mozilla.org/ja/docs/Tools/Settings">設定</a> タブ（歯車のアイコン）を開く</li>
+ <li><a href="/ja/docs/Tools/Settings">設定</a> タブ（歯車のアイコン）を開く</li>
  <li>"詳細な設定" において下記の設定項目にチェックが入っているか確認する。
   <ul>
-   <li><em>ブラウザとアドオンのデバッガを有効</em></li>
+   <li><em>ブラウザーとアドオンのデバッガーを有効</em></li>
    <li><em>リモートデバッグを有効</em></li>
   </ul>
  </li>
@@ -109,24 +107,24 @@ chrome.runtime.onMessage.addListener(notify);
 
 <p>{{EmbedYouTube("LJAM2vXJ790")}}</p>
 
-<p>{{英語版章題("Opening the Browser Toolbox")}}</p>
+<h3 id="Opening_the_Browser_Toolbox">ブラウザーツールボックスを開く</h3>
 
-<h3 id="ブラウザツールボックスを開く">ブラウザツールボックスを開く</h3>
-
-<p>次に、ブラウザツールボックスを開きます。</p>
+<p>次に、ブラウザーツールボックスを開きます。</p>
 
 <ul>
- <li>Alt キーを押下して表示されるメニューで、"ツール" → "Web 開発" → "ブラウザツールボックス" の順にクリックします。ブラウザコンソールでは無いことに中止して下さい。</li>
- <li>警告ダイアログが出るかもしれませんが OK を押して下さい。</li>
+ <li>Firefox のウェブ開発者メニューを開き、「ブラウザーツールボックス」を選択してください。 (注: 「ブラウザーコンソール」では<em>ありません</em>。)</li>
+ <li>警告ダイアログが出るかもしれませんが OK を押してください。</li>
 </ul>
 
-<p>ブラウザツールボックスが新しいウインドウとして開きます。ここで Firefox のメインウィンドウが前面に表示された場合は、ブラウザツールボックスが前に表示されるように画面をクリックしてください。{{EmbedYouTube("fZ492zAAy3o")}}</p>
+<p>ブラウザーツールボックスが新しいウインドウとして開きます。ここで Firefox のメインウィンドウが前面に表示された場合は、ブラウザーツールボックスが前に表示されるように画面をクリックしてください。</p>
+
+<p>{{EmbedYouTube("fZ492zAAy3o")}}</p>
 
-<p>Firefox における "ツールボックス" とは、下図のように複数のツールがタブで句切られているウインドウの名前です。<img alt="" src="https://mdn.mozillademos.org/files/11873/browser-toolbox.png" style="display: block; height: 458px; margin-left: auto; margin-right: auto; width: 900px;">上記のツールボックスには 5 つのツール、"Inspector" / "Console" / "Debugger" / "Style Editor" / "Scratchpad" が含まれており、ウインドウの上部にあるタブで切り替えることができます。この記事では "Console（コンソール）" と "Debugger（デバッガ）" の 2 つのツールを使用します。</p>
+<p>Firefox における "ツールボックス" とは、下図のように複数のツールがタブで区切られているウインドウの名前です。</p>
 
-<p>{{英語版章題("Viewing log output")}}</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="ログの出力を見る">ログの出力を見る</h3>
+<h3 id="Viewing_log_output">ログの出力を見る</h3>
 
 <p>コンソールタブでログを見ることができます。ここに表示されるメッセージは以下から出力されたものです。</p>
 
@@ -136,108 +134,100 @@ chrome.runtime.onMessage.addListener(notify);
  <li>コンテンツスクリプト</li>
 </ul>
 
-<p>このメッセージには、<a href="/ja/docs/Web/API/Console">Console API</a> を使用しているコードから出力されたログも含まれています。また、JavaScript エンジンからもエラーメッセージが出力されます。</p>
+<p>このメッセージには、<a href="/ja/docs/Web/API/console">Console API</a> を使用しているコードから出力されたログも含まれています。また、JavaScript エンジンからもエラーメッセージが出力されます。</p>
 
-<p>それでは上記のサンプルを使って試してみましょう。ブラウザツールボックスのコンソールタブを選択し、何かしらの Web ページを開き、リンクをクリックし、コンテンツスクリプトやバックグラウンドスクリプトからメッセージが記録されるのを確認してみましょう。</p>
+<p>それでは上記のサンプルを使って試してみましょう。ブラウザーツールボックスのコンソールタブを選択し、何かしらの Web ページを開き、リンクをクリックし、コンテンツスクリプトやバックグラウンドスクリプトからメッセージが記録されるのを確認してみましょう。</p>
 
 <p>{{EmbedYouTube("Qpx0n8gP3Qw")}}</p>
 
-<p>ただし、ブラウザツールボックスはどんなメッセージも受け取るため、要らないメッセージも多く受け取ってしまう問題があります。この問題を解決するには<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_and_searching">フィルタリングと検索</a>を参照して下さい。</p>
+<p>ただし、ブラウザーツールボックスはどんなメッセージも受け取るため、要らないメッセージも多く受け取ってしまう問題があります。この問題を解決するには<a href="/ja/docs/Tools/Web_Console/Console_messages#filtering_and_searching">フィルタリングと検索</a>を参照してください。</p>
 
-<p>{{英語版章題("Debugging JavaScript")}}</p>
+<h3 id="Debugging_JavaScript">JavaScript をデバッグする</h3>
 
-<h3 id="JavaScript_をデバッグする">JavaScript をデバッグする</h3>
+<p>ブラウザーツールボックスを用いると、バックグラウンドスクリプトやブラウーザ上で動作しているスクリプト、ポップアップのページアクションで動作するスクリプトに対し、 JavaScript デバッガーでブレークポイントを設定することができます。</p>
 
-<p>ブラウザツールボックスを用いると、バックグラウンドスクリプトやブラウザ上で動作しているスクリプト、ポップアップのページアクションで動作するスクリプトに対し、JavaScript デバッガでブレークポイントを設定することができます。</p>
+<p>拡張機能がインストールされて有効になっていれば、デバッガーでバックグラウンドスクリプトにアクセスできます。ポップアップスクリプトは、ポップアップが表示されている間だけ見ることができます。ポップアップスクリプトが読み込まれた時点ですぐにデバッガーからアクセスしたい場合は、スクリプトの最初に <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> 文を挿入してみてください。</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>JavaScript デバッガを使用するために、まずはブラウザツールボックスのデバッガタブを選択します。ここにはブラウザで動いている全てのソースコードが表示されています。そのため、<a href="/ja/docs/Tools/Debugger/How_to/Search_and_filter">検索ボックスをクリックしてソースの名前を入力し</a>、自分のスクリプトが表示されるようにします。</p>
-
-<p>自分のスクリプトを見つかったら、ブレークポイントをコードに設定したり、コードをステップ実行したり、<a href="/ja/docs/Tools/Debugger">他にもデバッガに可能なことは何でも実行できます</a>。</p>
+<p>自分のソースを見つかったら、ブレークポイントをコードに設定したり、コードをステップ実行したり、<a href="/ja/docs/Tools/Debugger">他にもデバッガーに可能なことは何でも実行できます</a>。</p>
 
 <p>{{EmbedYouTube("3edeJiG38ZA")}}</p>
 
-<p>{{英語版章題("JavaScript command line interpreter")}}</p>
-
-<h3 id="JavaScript_コマンドラインインタプリタ">JavaScript コマンドラインインタプリタ</h3>
+<h3 id="JavaScript_command_line_interpreter">JavaScript コマンドラインインタープリター</h3>
 
-<p>コンソールには <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタプリタ</a> が含まれており、実行しているプログラムの状態を調べたり操作することができます。この機能はコンソールを Web ページにアタッチしている際によく使いますが、ブラウザツールボックスでインタプリタを用いるのは一般に難しくなります（ブラウザツールボックスのコンソールは、デバッグしたい特定の拡張機能だけではなく、ブラウザ全体をスコープとしてしまうため）。</p>
+<p>コンソールには <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタープリター</a> が含まれており、実行しているプログラムの状態を調べたり操作することができます。この機能はコンソールをウェブページに接続されている場合によく使いますが、ブラウザーツールボックスでは、コンソールのスコープが、デバッグしようとしている特定の拡張機能ではなく、ブラウザー全体になるため、一般的に使用することが難しくなります。</p>
 
-<p>とはいえ、次のようなトリックを使うと上手くいきます。デバッガがブレークポイントで停止している間は、そのプログラムにコンソールのスコープが設定されます。そのため、拡張機能のコードにブレークポイントを設定しておくことで、拡張機能中の関数を呼び出したり、変数値を再代入したりするなど、拡張機能に対して動的にアクセスすることができます。</p>
+<p>とはいえ、そんな時に役立つコツがあります。デバッガーがブレークポイントで一時停止している間、コンソールのスコープは、デバッガーが一時停止しているプログラムの位置でのスコープになります。そのため、拡張機能のコードでブレークポイントに当たると、拡張機能の関数を呼び出したり、変数の値を再設定したりといった具合に、拡張機能と直接やりとりすることができます。</p>
 
-<p>この機能は <a href="/ja/docs/Tools/Web_Console/Split_console">コンソールを常時表示</a> （画面の半分にはコンソールを、もう半分にはデバッガなどの異なるツールを表示）している際に特に効果的です。</p>
+<p>この機能は特に、<a href="/ja/docs/Tools/Web_Console/Split_console">分割コンソール</a>機能と組み合わせると役立ちます。これによってツールボックスを半分に分割することができます。半分はコンソールになり、もう半分は別なコンソールになります (この場合は JavaScript デバッガーです)。</p>
 
 <p>{{EmbedYouTube("xprf58qOtLY")}}</p>
 
-<p>{{英語版章題("Debugging content scripts")}}</p>
+<h3 id="Debugging_content_scripts">コンテンツスクリプトのデバッグ</h3>
 
-<h3 id="コンテンツスクリプトをデバッグする">コンテンツスクリプトをデバッグする</h3>
+<p>ブラウザーツールボックスには大きな制約が 1 つあります。それは、<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> で開発している場合に、 JavaScript Debugger からコンテンツスクリプトにアタッチできない点です。</p>
 
-<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 では少なくとも 2 つのプロセスに分かれています。一つはブラウザ自身の UI やシステムコードを実行し、他は Web ページのスクリプト実行などを担当する<em>コンテンツプロセス </em>です。ブラウザツールボックスは前者のプロセスにデバッガとしてアタッチします。しかし、コンテンツスクリプトは他のプロセスで実行しているため、ブラウザツールボックスのスクリプト一覧には表示されないのです。</p>
+<p>コンテンツスクリプトスクリプトをマルチプロセス Firefox でデバッグする場合は、 Browser Content Toolbox を使用してください。 Browser Content Toolbox はブラウザーツールボックスによく似ていますが、開発ツールをブラウザーのコンテンツプロセスにアタッチさせる点で異なり、コンテンツスクリプトにアクセスできるようになります。</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="warning">
-<p>ブラウザツールボックスのオプションで "Worker のデバッグを有効" を設定すると、Browser Content Toolbox でデバッグができなくなります。この問題は<span id="summary_alias_container"><span id="short_desc_nonedit_display"> </span></span> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1236892">Bug 1236892</a> で解決されるはずです。</p>
+<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>
 
-<p>{{英語版章題("Debugging popups")}}</p>
+<h3 id="Debugging_popups">ポップアップのデバッグ</h3>
 
-<h3 id="ポップアップをデバッグする">ポップアップをデバッグする</h3>
+<div class="blockIndicator geckoVersionNote">Firefox 47 の新機能</div>
 
-<div class="geckoVersionNote">Firefox 47 からの新機能です</div>
-
-<p>Firefox 47 から、ブラウザツールボックスでポップアップの中身をデバッグできるようになりました。デバッグは 3 つの手順からなります。</p>
+<p>Firefox 47 から、ブラウザーツールボックスでポップアップの中身をデバッグできるようになりました。デバッグは 3 つの手順からなります。</p>
 
 <ul>
  <li>パネルの autohide を無効化する</li>
  <li>ポップアップを開く</li>
- <li>ポップアップを含んだドキュメントを選択する</li>
+ <li>ポップアップを含んだ文書を選択する</li>
 </ul>
 
 <p>{{EmbedYouTube("EEU4NeAS1s4")}}</p>
 
-<h4 id="autohide_を無効化する">autohide を無効化する</h4>
+<h4 id="Disable_autohide">autohide を無効化する</h4>
 
-<p>パネルのデバッグに関してありがちな問題は、パネルの外をクリックすると隠れてしまう点です。そのため、まず初めにこの動作を無効化しておきましょう。ブラウザツールボックスで 4 つの小さい四角形からなるアイコンをクリックします。</p>
+<p>パネルのデバッグに関してありがちな問題は、パネルの外をクリックすると隠れてしまう点です。そのため、まず初めにこの動作を無効化しておきましょう。ブラウザーツールボックスで 4 つの小さい四角形からなるアイコンをクリックします。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12622/disable-autohide.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 877px;">すると、Escape キーを押した場合でもパネルが前面に表示されたままになるはずです。</p>
+<p><img alt="" src="disable-autohide.png" style="display: block; margin-left: auto; margin-right: auto;">すると、 Esc キーを押した場合でもパネルが前面に表示されたままになるはずです。</p>
 
-<div class="note">
-<p>ここで設定した authohide の無効化は、拡張機能のポップアップのみならず、ハンバーガーメニュー (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) などによる <a href="/ja/docs/Tools/Browser_Toolbox#Debugging_popups">ブラウザ本体のポップアップ</a> にも適用されます。</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>また、この設定はブラウザーを再起動した後も引き継がれます。この件に関しては <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>
+<p>ブラウザーの内部構造的には、この autohide ボタンは <code>ui.popup.disable_autohide</code> の設定項目を切り替えるだけのものです。そのため、about:config において手動で切り替えることも可能です。</p>
 </div>
 
-<h4 id="ポップアップを開く">ポップアップを開く</h4>
-
-<p>次にポップアップを開きます。ここでブラウザツールボックスに戻ると、パネルが開いたままになっているはずです。</p>
+<h4 id="Open_the_popup">ポップアップを開く</h4>
 
-<h4 id="ポップアップのフレームを選択する">ポップアップのフレームを選択する</h4>
+<p>次にポップアップを開きます。ここでブラウザーツールボックスに戻ると、パネルが開いたままになっているはずです。</p>
 
-<p>ポップアップはそれ自身のフレームに読み込まれています。そのため、ブラウザツールボックスの <a href="/ja/docs/Tools/Browser_Toolbox#Targeting_a_document">フレーム選択ボタン</a> でポップアップのドキュメントを選択します。<img alt="" src="https://mdn.mozillademos.org/files/12624/frame-selection.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 877px;">このドキュメントは以下のような名前を持っています。</p>
+<h4 id="Select_the_popup's_frame">ポップアップのフレームを選択する</h4>
 
-<pre class="line-numbers  language-html"><code class="language-html">moz-extension://<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>some-uuid</span><span class="punctuation token">&gt;</span></span>/path/to/your-popup.html</code></pre>
+<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>
 
-<p>{{EmbedYouTube("/9jdHDCKIN-U")}}</p>
+<pre>moz-extension://&lt;some-uuid&gt;/path/to/your-popup.html</pre>
 
-<p>こうしてツールボックスのスコープがポップアップに設定されました。インスペクタでポップアップの HTML や CSS の確認・変更が行えます。デバッガでは、ポップアップに読み込まれているスクリプトを検索したり、スクリプトにブレークポイントを設定することができます。</p>
+<p>{{EmbedYouTube("9jdHDCKIN-U")}}</p>
 
-<p>{{英語版章題("What about the Add-on Debugger?")}}</p>
+<p>こうしてツールボックスのスコープがポップアップに設定されました。インスペクタでポップアップの HTML や CSS の確認・変更が行えます。デバッガーでは、ポップアップに読み込まれているスクリプトを検索したり、スクリプトにブレークポイントを設定することができます。</p>
 
-<h2 id="Add-on_Debuggerとは？">Add-on Debuggerとは？</h2>
+<h2 id="What_about_the_Add-on_Debugger">Add-on Debuggerとは</h2>
 
-<p>Firefox での拡張機能のデバッグは、今後 <a href="/ja/Add-ons/Add-on_Debugger">Add-on Debugger</a> が用いられる予定になっています。</p>
+<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>
+<p>ブラウザーツールボックスと比較した際、 <a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> は拡張機能ファイルのみを表示するため、容易にスクリプトを探すことができるという大きな利点があります。しかし今のところ、コンソールメッセージを拡張機能から Add-on Debugger へ表示させられないため、ブラウザーツールボックスのほうが便利です。</p>