initial commit

20 files changed, 701 insertions, 0 deletions

diff --git a/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
new file mode 100644
index 0000000000..88d3b0d7bb
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
@@ -0,0 +1,18 @@
+---
+title: ブレークポイントの無効化
+slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints
+translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>ブレークポイントを無効にするには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>でブレークポイントのエントリの横にあるチェックボックスをオフにします。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。</p>
+
+<p>ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。</p>
+
+<p>すべてのブレークポイントを無効/有効にするには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>で"Toggle all breakpoints"ボタンを使用します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html
new file mode 100644
index 0000000000..573456e364
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html
@@ -0,0 +1,32 @@
+---
+title: アドオンでデバッグにアクセスする
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<div class="warning">
+<p>このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。</p>
+</div>
+
+<p>以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:</p>
+
+<ul>
+ <li>window.addEventListener("Debugger:EditorLoaded") - 読み取り専用のスクリプトパネルが読み込まれたときに呼び出されます。</li>
+ <li>window.addEventListener("Debugger:EditorUnloaded")</li>
+</ul>
+
+<p>関連ファイル:</p>
+
+<ul>
+ <li>chrome://browser/content/devtools/debugger-controller.js</li>
+ <li>chrome://browser/content/devtools/debugger-toolbar.js</li>
+ <li>chrome://browser/content/devtools/debugger-view.js</li>
+ <li>chrome://browser/content/devtools/debugger-panes.js</li>
+</ul>
+
+<p>残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a> をご覧ください)</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html
new file mode 100644
index 0000000000..f16826cf46
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html
@@ -0,0 +1,28 @@
+---
+title: ソースをブラックボックス化する
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>現在のウェブ開発では <a href="http://jquery.com/">jQuery</a>、<a href="http://emberjs.com/">Ember</a>、<a href="http://angularjs.org/">Angular</a> のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは<a href="http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9"> ブラックボックス </a>のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。</p>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p>
+
+<p><a href="/ja/docs/Tools/GCLI">開発ツールバー</a> を開いて <code>dbg blackbox</code> コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p>
+
+<p>ソースをブラックボックス化すると以下のようになります:</p>
+
+<ul>
+ <li>すべてのブレークポイントが無効になります。</li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">デバッガーオプション</a> で [例外発生で停止] が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。</li>
+ <li>ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。</li>
+</ul>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html
new file mode 100644
index 0000000000..706d844280
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html
@@ -0,0 +1,22 @@
+---
+title: DOM イベントでブレークする
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。</p>
+
+<p>始めに<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar"> ツールバー </a>上の変数/イベントペインを開くボタンをクリックして、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン </a>を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13210/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。</p>
+
+<p>イベントが発生すると、リスナーの始点でコードがブレークします。</p>
+
+<p>{{EmbedYouTube("f-tbR8kj0K0")}}</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html
new file mode 100644
index 0000000000..bbd25b285e
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html
@@ -0,0 +1,36 @@
+---
+title: eval ソースをデバッグする
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> に渡される文字列や <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。</p>
+
+<p>これを行うために、<code>//# sourceURL</code> ディレクティブを使用してソースに名前をつけなければなりません:</p>
+
+<pre class="brush: js">var button = document.getElementById("clickme");
+button.addEventListener("click", evalFoo, false);
+
+var script = "function foo() {" +
+             "  console.log('called foo');" +
+             "}" +
+             "foo();//# sourceURL=my-foo.js";
+
+function evalFoo() {
+  eval(script);
+}</pre>
+
+<p>これは、スクリプトに "my-foo.js" という名前をつけます。</p>
+
+<p>文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">整形 </a>できます:</p>
+
+<p>{{EmbedYouTube("nFm8F8Anmic")}}</p>
+
+<p>ソースにつけた名前は、<a href="/ja/docs/Tools/Web_Console#Error_messages">ウェブコンソール </a>に現れるスタックトレースでも表示されます。</p>
+
+<p>また、無名の eval ソース内にある <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> 文でもデバッガーが停止します。</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html
new file mode 100644
index 0000000000..73595678bf
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html
@@ -0,0 +1,22 @@
+---
+title: ブレークポイントの無効化
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a> で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。</p>
+
+<p>ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。</p>
+
+<p>すべてのブレークポイントのオン/オフを切り替えるには、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html
new file mode 100644
index 0000000000..7d08b706a5
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html
@@ -0,0 +1,46 @@
+---
+title: 変数を調査、編集、ウォッチする
+slug: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables'
+translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables'
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<h2 id="Examine_variables" name="Examine_variables">変数を調査する</h2>
+
+<p>コードがブレークポイントで停止したときはデバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>で、変数の状態を調査できます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>変数はスコープによってグループ化されます: Function スコープには <code>user</code> や <code>greeting</code> といった関数で定義したローカル変数はもちろん、ビルトインの <code>arguments</code> および <code>this</code> 変数も表示します。同様にグローバルスコープでは <code>localStorage</code> や <code>console</code> といったビルトインのグローバル変数だけでなく、<code>greetme</code> といった独自に定義したグローバル変数も表示します。</p>
+
+<p>それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。</p>
+
+<p>変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは <a href="/ja/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> をご覧ください。</p>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script-filter">スクリプトフィルター</a> で "*" 修飾子を使用するか、(<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">デバッガーの設定</a> で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。</p>
+
+<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p>
+
+<p>ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は <code>(optimized away)</code> となっており、編集ができません。以下のスクリーンショットでは、変数 <code>upvar</code> が最適化で削除されています:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p>
+
+<h2 id="Modify_variables" name="Modify_variables">変数を変更する</h2>
+
+<p>コードがブレークポイントで停止したときに、デバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:</p>
+
+<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p>
+
+<h2 id="Watch_an_expression" name="Watch_an_expression">式をウォッチする</h2>
+
+<p>ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。[ウォッチ式を追加] と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。</p>
+
+<p>そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:</p>
+
+<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p>
+
+<p>コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある [x] 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html
new file mode 100644
index 0000000000..da2ab1e637
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html
@@ -0,0 +1,16 @@
+---
+title: DOM ノードのハイライトと調査
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。</p>
+
+<p>また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した <a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> が開きます。</p>
+
+<p>{{EmbedYouTube("0JWxXp2Qql8")}}</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html
new file mode 100644
index 0000000000..b792199c59
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: How to
+slug: Tools/Debugger_(before_Firefox_52)/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><span class="seoSummary">これらの記事では、デバッガの使用方法について説明します。</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..2408127b78
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html
@@ -0,0 +1,21 @@
+---
+title: デバッガーを開く
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>メニューボタン ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:</p>
+
+<ul>
+ <li>Windows および Linux では Control-Shift-S</li>
+ <li>Mac では Command-Option-S</li>
+</ul>
+
+<p>インスペクターがアクティブになっている <a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13200/debugger-open.png" style="display: block; height: 774px; margin-left: auto; margin-right: auto; width: 1006px;"></p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html
new file mode 100644
index 0000000000..13146945a0
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html
@@ -0,0 +1,18 @@
+---
+title: 圧縮されたファイルを整形する
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13212/debugger-pretty-print.png" style="display: block; height: 407px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>ファイルを読みやすい形式で表示します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">デバッガーの設定</a> で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html
new file mode 100644
index 0000000000..881571f63e
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html
@@ -0,0 +1,74 @@
+---
+title: 検索とフィルター
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13214/debugger-filter.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>接頭辞をつけずに文字列を入力すると、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。</p>
+
+<p>いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">接頭辞</th>
+   <th scope="col">機能</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>なし</td>
+   <td><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a> に表示しているスクリプトの絞り込みを行います。</td>
+  </tr>
+  <tr>
+   <td>!</td>
+   <td>すべてのファイルから文字列を検索します。</td>
+  </tr>
+  <tr>
+   <td>@</td>
+   <td>すべてのファイルから、文字列を含む関数定義を検索します。</td>
+  </tr>
+  <tr>
+   <td>#</td>
+   <td>
+    <p>現在 <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> で開いているファイルから文字列を検索します。</p>
+
+    <p>検索した後に Enter キーを押下すると、マッチした箇所を巡ります。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>:</td>
+   <td>現在 <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> で開いているファイルで、指定した行へ移動します。</td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> に表示している変数の絞り込みを行います。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>これらのオプションは、フィルター内をクリックしたときにポップアップ表示します。また、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> のコンテキストメニューでもアクセスできます。</p>
+
+<p>接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td>file.js:12</td>
+   <td>"file.js" を開いて 12 行目へ移動します。</td>
+  </tr>
+  <tr>
+   <td>mod#onLoad</td>
+   <td>ファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..cb8ae2d4bf
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,29 @@
+---
+title: ブレークポイントを設置する
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p><span class="seoSummary">デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。</span></p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、実行を停止したい行の行番号をクリックします。</li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、実行を停止したい行でコンテキストメニューを開いて、[ブレークポイントを設置] を選択します。</li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、ブレークポイントを設置したい行をハイライトして Ctrl+B (Windows/Linux) または Command+B (Mac OS X) を押下します。</li>
+</ul>
+
+<p>それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> で、ファイル名の下に一覧表示する</li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン </a>で、行に青色の矢印がつく、または <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">条件付き </a>ブレークポイントであれば橙色の矢印がつく</li>
+</ul>
+
+<p>以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13202/debugger-details.png" style="display: block; height: 325px; margin-left: auto; margin-right: auto; width: 900px;"></p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html
new file mode 100644
index 0000000000..3a3958596c
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html
@@ -0,0 +1,22 @@
+---
+title: 条件付きブレークポイントを設置する
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>条件付きブレークポイントを設置するには <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12900/debugger-conditional-breakpoint.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 823px;"></p>
+
+<p>条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12904/debugger-conditional-orange.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 823px;"></p>
+
+<p>条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12902/debugger-make-conditional.png" style="display: block; height: 427px; margin-left: auto; margin-right: auto; width: 823px;"></p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html
new file mode 100644
index 0000000000..634315dd13
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html
@@ -0,0 +1,21 @@
+---
+title: コードをステップ実行する
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>コードがブレークポイントで止まったときは、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> の左側にある 4 つのボタンを使用してステップ実行を実施できます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13208/debugger-step.png" style="display: block; height: 414px; margin-left: auto; margin-right: auto; width: 903px;">ボタンは順に以下のとおりです:</p>
+
+<ul>
+ <li>復帰: 次のブレークポイントまで実行します。</li>
+ <li>ステップオーバー: 同一関数内で次の行へ進みます。</li>
+ <li>ステップイン: 当該行が関数の呼び出しでなければ、関数内で次の行へ進みます。関数の呼び出しである場合は、呼び出した関数に入ります。</li>
+ <li>ステップアウト: 現在の関数の終端まで実行します。</li>
+</ul>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..1f41177f80
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html
@@ -0,0 +1,20 @@
+---
+title: ソースマップを使用する
+slug: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map
+translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。<a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ</a> の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。</p>
+
+<p>デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">デバッガーのオプション</a>] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12922/debugger-sourcemaps.png" style="display: block; height: 506px; margin-left: auto; margin-right: auto; width: 915px;"></p>
+
+<p>もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:</p>
+
+<pre>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/index.html b/files/ja/tools/debugger_(before_firefox_52)/index.html
new file mode 100644
index 0000000000..404974a00f
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/index.html
@@ -0,0 +1,55 @@
+---
+title: デバッガー (Firefox 52 より前)
+slug: Tools/Debugger_(before_Firefox_52)
+translation_of: Tools/Debugger_(before_Firefox_52)
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。</p>
+
+<p>Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> のページをご覧ください。</p>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<hr>
+<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2>
+
+<p>デバッガーについてひととおり理解するために、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour"> UI のクイックツアー </a>を用意しました。</p>
+
+<hr>
+<h2 id="How_to" name="How_to">使い方</h2>
+
+<p>デバッガーで何ができるかを知るために、以下のガイドをご覧ください:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Open_the_debugger">デバッガーを開く</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">ブレークポイントを設置する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">ブレークポイントの無効化</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">コードをステップ実行する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">DOM イベントでブレークする</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">DOM ノードのハイライトと調査</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">圧縮されたファイルを整形表示する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">検索とフィルター</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">条件付きブレークポイントを設置する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">変数を調査、編集、ウォッチする</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">ソースマップを使用する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">ソースをブラックボックス化する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">eval ソースをデバッグする</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">アドオンでデバッグにアクセスする</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Keyboard_shortcuts">キーボードショートカット</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">オプション</a></li>
+</ul>
+</div>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..8625bb75bb
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html
@@ -0,0 +1,16 @@
+---
+title: キーボードショートカット
+slug: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts
+translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}</p>
+
+<h2 id="Global_shortcuts" name="Global_shortcuts">共通ショートカット</h2>
+
+<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html
new file mode 100644
index 0000000000..a9f0a505b3
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html
@@ -0,0 +1,63 @@
+---
+title: オプション
+slug: Tools/Debugger_(before_Firefox_52)/Settings
+translation_of: Tools/Debugger_(before_Firefox_52)/Settings
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>デバッガーには独自の設定メニューがあり、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> 上のアイコンからアクセスできます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p>
+
+<p>それぞれのオプションは、オン/オフの切り替え式になっています:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 40%;"><strong>圧縮されたソースを自動的に整形表示</strong></td>
+   <td>このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">整形 </a>します。</td>
+  </tr>
+  <tr>
+   <td><strong>例外発生で停止</strong></td>
+   <td>このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。</td>
+  </tr>
+  <tr>
+   <td><strong>キャッチした例外を無視</strong></td>
+   <td>
+    <p>このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。</p>
+
+    <p>これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>起動時にデバッガを開く</strong></td>
+   <td>このオプションが有効であるときは、始めにデバッガーを起動した時点で<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane"> 変数ペイン </a>が開くようになります。</td>
+  </tr>
+  <tr>
+   <td><strong>計算可能なプロパティのみ表示</strong></td>
+   <td>{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。</td>
+  </tr>
+  <tr>
+   <td><strong>変数フィルターボックスを表示</strong></td>
+   <td>このオプションを有効にすると <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。</td>
+  </tr>
+  <tr>
+   <td><strong>元のソースを表示</strong></td>
+   <td>このオプションを有効にすると、デバッガーは可能であれば <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ </a>を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。</td>
+  </tr>
+  <tr>
+   <td><strong>圧縮されたソースを自動的にブラックボックス化する</strong></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Firefox 33 の新機能</p>
+    </div>
+
+    <p>URL の末尾が ".min.js" であるソースファイルを自動的に<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source"> ブラックボックス化</a> します。デフォルトで有効です。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html
new file mode 100644
index 0000000000..8a8b6645f3
--- /dev/null
+++ b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html
@@ -0,0 +1,129 @@
+---
+title: UI ツアー
+slug: Tools/Debugger_(before_Firefox_52)/UI_Tour
+translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p>
+
+<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p>
+</div>
+
+<p>本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:</p>
+
+<ul>
+ <li><a href="#toolbar">ツールバー</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">コールスタックペイン</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a></li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13182/debugger-overview-annotated.png" style="display: block; height: 1640px; margin-left: auto; margin-right: auto; width: 1019px;"></p>
+
+<h2 id="Toolbar" name="Toolbar"><a name="toolbar">ツールバー</a></h2>
+
+<p>ツールバーは 4 つのセクションで構成されます:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">スクリプト内での動きを制御する</a> ボタン</li>
+ <li>コールスタックの可視化</li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">スクリプトフィルター</a></li>
+ <li>以下の操作を行うボタン:
+  <ul>
+   <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> や <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a> の展開/折りたたみ</li>
+   <li>デバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">設定</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13194/debugger-toolbar-annotated.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 942px;"></p>
+
+<p>左側にある 4 つのボタンは、以下の機能を実行します:</p>
+
+<ul>
+ <li><strong>停止/復帰</strong> (F8): デバッグ中のスクリプトの実行を停止および再開します。上図のようにボタンが青色で "押し込まれている" ときは、ボタンを押して停止したかブレークポイントにヒットしたことにより、スクリプトが停止していることを表します。</li>
+ <li><strong>ステップオーバー</strong> (F10): JavaScript コードで現在の行をステップ実行します。</li>
+ <li><strong>ステップイン</strong> (F11): JavaScript で現在の行にある関数呼び出しにスキップします。</li>
+ <li><strong>ステップアウト</strong> (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。</li>
+</ul>
+
+<p>コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。</p>
+
+<h2 id="Source_list_pane" name="Source_list_pane">ソースリストペイン</h2>
+
+<p>ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">コールスタックペイン</a> は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13186/debugger-source-list-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> に読み込みます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13188/debugger-source-list-pane-annotated.png" style="display: block; height: 535px; margin-left: auto; margin-right: auto; width: 922px;"><br>
+ ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:</p>
+
+<ul>
+ <li>当該ブレークポイント、すべてのブレークポイント、あるいは他のブレークポイントを有効化、無効化、あるいは削除する</li>
+ <li>当該ブレークポイントを条件付きにする (すでに条件付きである場合は、条件を変更する)</li>
+</ul>
+
+<p>ソースリストの下部にある 3 個のアイコンで、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">ソースのブラックボックス化</a>、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">圧縮された JS ファイルの整形</a>、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">すべてのブレークポイントの有効/無効</a> の切り替えが可能です。</p>
+
+<p>ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13184/debugger-source-list-menu-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<h2 id="Call_stack_pane" name="Call_stack_pane">コールスタックペイン</h2>
+
+<p>デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13178/debugger-call-stack-pane-annotated.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。</p>
+
+<h2 id="Source_pane" name="Source_pane">ソースペイン</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13190/debugger-source-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13192/debugger-source-pane-breakpoints-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 903px;">ソースペインでは、コンテキストメニューで以下の操作が可能です:</p>
+
+<ul>
+ <li>ブレークポイントを設置</li>
+ <li>条件付きブレークポイントを設置</li>
+ <li>選択範囲のウォッチ式を追加</li>
+ <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script filter">スクリプトフィルター</a> を使用して検索やフィルターを行う</li>
+</ul>
+
+<p>Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。<kbd>control</kbd> キー (Mac OS X では <kbd>command</kbd> キー) を押下しながら、関数名をクリックしてください。</p>
+
+<h3 id="Variables_popup" name="Variables_popup">変数のポップアップ</h3>
+
+<p>ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13198/debugger-variables-popup-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>この機能により <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> を開いて検索することなく、すばやく変数の値を確認できます。</p>
+
+<h2 id="Variables_pane" name="Variables_pane">変数ペイン</h2>
+
+<p>変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13196/debugger-variables-pane.png" style="display: block; height: 670px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>変数ペインは画面領域を <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a> と共有しており、ペイン上部のタブでそれらを切り替えることができます。</p>
+
+<h2 id="Events_pane" name="Events_pane">イベントペイン</h2>
+
+<p>イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13180/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>これは画面領域を <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> と共有しており、ペイン上部のタブでそれらを切り替えることができます。</p>
+
+<p>イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:</p>
+
+<pre>[イベント名] on [イベントターゲット] in [ソースファイル]</pre>
+
+<p>イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。</p>