initial commit

24 files changed, 791 insertions, 0 deletions

diff --git a/files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html b/files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html
new file mode 100644
index 0000000000..5730071337
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html
@@ -0,0 +1,26 @@
+---
+title: アドオンでデバッグにアクセスする
+slug: Tools/Debugger/How_to/Access_debugging_in_add-ons
+translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons
+---
+<div>{{ToolsSidebar}}</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/how_to/black_box_a_source/index.html b/files/ja/tools/debugger/how_to/black_box_a_source/index.html
new file mode 100644
index 0000000000..0378307727
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/black_box_a_source/index.html
@@ -0,0 +1,20 @@
+---
+title: ソースをブラックボックス化する
+slug: Tools/Debugger/How_to/Black_box_a_source
+translation_of: Tools/Debugger/How_to/Ignore_a_source
+---
+<p>{{ToolsSidebar}}</p>
+
+<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/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>ソースをブラックボックス化すると以下のようになります:</p>
+
+<ul>
+ <li>すべてのブレークポイントが無効になります。</li>
+ <li><a href="/ja/docs/Tools/Debugger/Settings">デバッガーオプション</a> で“例外発生で停止”が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。</li>
+ <li>ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。</li>
+</ul>
diff --git a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html
new file mode 100644
index 0000000000..d784061bb8
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html
@@ -0,0 +1,22 @@
+---
+title: DOM イベントでブレークする
+slug: Tools/Debugger/How_to/Break_on_a_DOM_event
+translation_of: Tools/Debugger/Break_on_DOM_mutation
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を <code>false</code> に設定して、古いデバッガーに戻すことができます。</p>
+
+<p>古いデバッガーのドキュメントは、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p>
+</div>
+
+<p>特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。</p>
+
+<p>始めに<a href="/ja/docs/Tools/Debugger/UI_Tour#toolbar"> ツールバー </a>上の変数/イベントペインを開くボタンをクリックして、<a href="/ja/docs/Tools/Debugger/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/how_to/breaking_on_exceptions/index.html b/files/ja/tools/debugger/how_to/breaking_on_exceptions/index.html
new file mode 100644
index 0000000000..a8d400fdcf
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/breaking_on_exceptions/index.html
@@ -0,0 +1,18 @@
+---
+title: 例外で停止する
+slug: Tools/Debugger/How_to/Breaking_on_exceptions
+translation_of: Tools/Debugger/How_to/Breaking_on_exceptions
+---
+<p>{{ToolsSidebar}}</p>
+
+<p><a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a> でアイコン <img alt="" src="https://mdn.mozillademos.org/files/14410/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> をクリックすると、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Error">例外</a> で停止するようにデバッガーを指定できます。</p>
+
+<p>{{EmbedYouTube("UWIO_UM827k")}}</p>
+
+<p>ボタンは 3 種類の状態があり、クリックするたびに次の状態へ切り替わります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14416/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : 例外で停止しません。これは初期状態です。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14412/uncaught-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : <a href="/ja/docs/Web/JavaScript/Reference/Statements/try...catch">キャッチしていない</a> 例外に限り停止します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14414/all-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : すべての例外で停止します。</p>
diff --git a/files/ja/tools/debugger/how_to/debug_eval_sources/index.html b/files/ja/tools/debugger/how_to/debug_eval_sources/index.html
new file mode 100644
index 0000000000..d04bc67890
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/debug_eval_sources/index.html
@@ -0,0 +1,29 @@
+---
+title: eval ソースをデバッグする
+slug: Tools/Debugger/How_to/Debug_eval_sources
+translation_of: Tools/Debugger/How_to/Debug_eval_sources
+---
+<p>{{ToolsSidebar}}</p>
+
+<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>以下の動画では、このようなソースを含むページを読み込んでいます:</p>
+
+<pre class="brush: js">var script = `function foo() {
+               console.log('called foo');
+             }
+             //# sourceURL=my-foo.js`;
+
+eval(script);
+
+var button = document.getElementById("foo");
+button.addEventListener("click", foo, false);
+</pre>
+
+<p>評価された文字列は、<code>//# sourceURL</code> ディレクティブを使用して "my-foo.js" という名称が与えられます。このソースは <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> に表示されて、他のソースと同様に開いたりデバッグしたりできます。</p>
+
+<p>{{EmbedYouTube("AkvN40-y1NE")}}</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/how_to/disable_breakpoints/index.html b/files/ja/tools/debugger/how_to/disable_breakpoints/index.html
new file mode 100644
index 0000000000..943c7c3d1f
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/disable_breakpoints/index.html
@@ -0,0 +1,12 @@
+---
+title: ブレークポイントの無効化
+slug: Tools/Debugger/How_to/Disable_breakpoints
+translation_of: Tools/Debugger/How_to/Disable_breakpoints
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>ブレークポイントを 1 つ無効化するには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Breakpoints_list">ブレークポイント一覧</a> でブレークポイントの隣にあるチェックボックスのチェックを外します。</p>
+
+<p>すべてのブレークポイントを無効化するには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a> でアイコン <img alt="" src="https://mdn.mozillademos.org/files/14402/toggle-all.png" style="height: 24px; margin-bottom: -5px; width: 30px;"> をクリックします。</p>
+
+<p>{{EmbedYouTube("ULoZ70XPd90")}}</p>
diff --git a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html
new file mode 100644
index 0000000000..d0706ef09d
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html
@@ -0,0 +1,46 @@
+---
+title: 変数を調査、編集、ウォッチする
+slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables'
+translation_of: Tools/Debugger/How_to/Set_Watch_Expressions
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を <code>false</code> に設定して、古いデバッガーに戻すことができます。</p>
+
+<p>古いデバッガーのドキュメントは、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p>
+</div>
+
+<h2 id="Examine_variables" name="Examine_variables">変数を調査する</h2>
+
+<p>コードがブレークポイントで停止したときはデバッガーの <a href="/ja/docs/Tools/Debugger/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/How_to/Search_and_filter" title="#script-filter">スクリプトフィルター</a> で "*" 修飾子を使用するか、(<a href="/ja/docs/Tools/Debugger/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/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/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html
new file mode 100644
index 0000000000..4c93d720f7
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html
@@ -0,0 +1,16 @@
+---
+title: DOM ノードのハイライトと調査
+slug: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes
+translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を <code>false</code> に設定して、古いデバッガーに戻すことができます。</p>
+
+<p>古いデバッガーのドキュメントは、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p>
+</div>
+
+<p><a href="/ja/docs/Tools/Debugger/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/how_to/index.html b/files/ja/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..22fe236948
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/index.html
@@ -0,0 +1,14 @@
+---
+title: デバッガの使い方
+slug: Tools/Debugger/How_to
+tags:
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div>
+
+<div>これらの記事では、デバッガの使用方法について説明します。</div>
+
+<div> </div>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/ja/tools/debugger/how_to/open_the_debugger/index.html b/files/ja/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..86b3c84cb0
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,16 @@
+---
+title: デバッガーを開く
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>デバッガーを開く方法は 3 つあります:</p>
+
+<ul>
+ <li>Firefox メニューの [ウェブ開発] サブメニュー (メニューバーを表示している場合や OS X では [ツール] メニュー) で [デバッガー] を選択する</li>
+ <li>キーボードショートカット <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>S</kbd> (OS X では <kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd>) を押下する</li>
+ <li>メニューボタン ( <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=""> ) を押下して [開発ツール]、[デバッガー] の順に選択する</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
diff --git a/files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html b/files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html
new file mode 100644
index 0000000000..0a720e9e07
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html
@@ -0,0 +1,20 @@
+---
+title: 圧縮されたファイルを整形する
+slug: Tools/Debugger/How_to/Pretty-print_a_minified_file
+tags:
+  - JavaScript
+translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file
+---
+<p>{{ToolsSidebar}}</p>
+
+<p><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> のアイコン <img alt="" src="https://mdn.mozillademos.org/files/14406/debugger-prettify.png" style="height: 20px; margin-bottom: -5px; width: 23px;"> をクリックすると、圧縮された (minified) ファイルを整形します。デバッガーは整形したソースを表示して、"[original-name]:formatted" というような名前の新しいファイルとして表示します。</p>
+
+<p>{{EmbedYouTube("6kQrjS82rME")}}</p>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<div class="note">
+<p><strong>メモ</strong>: インライン JavaScript コードをあらかじめ確認したい場合は、インスペクタペインのコードをダブルクリックしてください。</p>
+</div>
+</div>
+</article>
diff --git a/files/ja/tools/debugger/how_to/search/index.html b/files/ja/tools/debugger/how_to/search/index.html
new file mode 100644
index 0000000000..1f64136a0a
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/search/index.html
@@ -0,0 +1,18 @@
+---
+title: 検索する
+slug: Tools/Debugger/How_to/Search
+translation_of: Tools/Debugger/How_to/Search
+---
+<p>{{ToolsSidebar}}</p>
+
+<h2 id="Searching_for_files" name="Searching_for_files">ファイルを検索する</h2>
+
+<p>特定のファイルを検索するには、<kbd>Control</kbd> + <kbd>P</kbd> (Mac では <kbd>Command</kbd> + <kbd>P</kbd>) を押下して検索文字列を入力します。入力内容に応じて、マッチするすべてのファイルを <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> に表示します。上下矢印キーでリスト内を移動することができ、<kbd>Return</kbd> を押下するとファイルを開きます:</p>
+
+<p>{{EmbedYouTube("xXsfYx0THWg")}}</p>
+
+<h2 id="Searching_within_a_file" name="Searching_within_a_file">ファイル内で検索する</h2>
+
+<p><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> に読み込んでいるファイル内で特定の文字列を検索するには、ソースペインにフォーカスがある状態で <kbd>Control</kbd> + <kbd>F</kbd> (Mac では <kbd>Command</kbd> + <kbd>F</kbd>) を押下します。<kbd>Return</kbd> を押下すると検索します。デバッガーはコード内でマッチした数を表示して、それぞれの箇所を枠で囲みます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14997/new-search.png" style="display: block; height: 524px; margin-left: auto; margin-right: auto; width: 595px;"></p>
diff --git a/files/ja/tools/debugger/how_to/search_and_filter/index.html b/files/ja/tools/debugger/how_to/search_and_filter/index.html
new file mode 100644
index 0000000000..7e51a1f3c0
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/search_and_filter/index.html
@@ -0,0 +1,68 @@
+---
+title: 検索とフィルタ
+slug: Tools/Debugger/How_to/Search_and_filter
+translation_of: Tools/Debugger/How_to/Search
+---
+<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Debugger/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>に一覧表示されているソースから検索します。</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/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/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>で開いているファイルから文字列を検索します。</p>
+
+    <p>検索した後に Enter キーを押下すると、マッチした箇所を巡ります。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>:</td>
+   <td>現在<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>で開いているファイルで、指定した行へ移動します。</td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td><a href="/ja/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a>に表示している変数の絞り込みを行います。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>これらのオプションは、フィルタ内をクリックしたときにポップアップ表示します。また、<a href="/ja/docs/Tools/Debugger/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/how_to/set_a_breakpoint/index.html b/files/ja/tools/debugger/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..3422962b5e
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,28 @@
+---
+title: ブレークポイントを設置する
+slug: Tools/Debugger/How_to/Set_a_breakpoint
+tags:
+  - JavaScript
+  - Tools
+translation_of: Tools/Debugger/How_to/Set_a_breakpoint
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>以下のいずれかの方法で、ブレークポイントを設置できます:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で、停止したい行の行番号をクリックします。</li>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で、停止したい行でコンテキストメニューを開いて [ブレークポイントを追加] を選択します。</li>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で、ブレークポイントを設置したい行をハイライトして <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) または <kbd>Command</kbd>+<kbd>B</kbd> (Mac OS X) を押下します。</li>
+</ul>
+
+<p>以下の動画は、コンテキストメニューを使用してブレークポイントを設置しています:</p>
+
+<p>{{EmbedYouTube("P7b98lEijF0")}}</p>
+
+<p>それぞれのブレークポイントは、デバッガー内の 2 か所に表示します:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Breakpoints_list">ブレークポイント一覧</a> で、ブレークポイントのファイル名や行番号を表示</li>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で行に青色の矢印を表示、または <a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付き</a> ブレークポイントであれば橙色の矢印を表示</li>
+</ul>
diff --git a/files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html
new file mode 100644
index 0000000000..e0aa4d51a6
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html
@@ -0,0 +1,16 @@
+---
+title: 条件付きブレークポイントを設置する
+slug: Tools/Debugger/How_to/Set_a_conditional_breakpoint
+translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>通常のブレークポイントは、行に関連付けられます。プログラムがその行に達すると、デバッガーは停止します。条件付きブレークポイントは条件も関連付けられており、条件は <a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a> で表します。プログラムがその行に達すると、式が <code>true</code> に評価された場合に限りデバッガーが停止します。</p>
+
+<p>{{EmbedYouTube("pVPlMhfrMwM")}}</p>
+
+<p>条件付きブレークポイントを設置するには <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> でコンテキストメニューを開いて、[条件付きブレークポイントを追加] を選択します。すると、式を入力できるテキストボックスが現れます。最後に <kbd>Return</kbd> を押下すると完了します。</p>
+
+<p>条件付きブレークポイントは、行番号に橙色の矢印を重ねて表示します。</p>
+
+<p>ブレークポイントをコンテキストクリックすると、[ブレークポイントを編集] というメニュー項目があります。既存の条件を変更したり、通常のブレークポイントに条件を追加したりできます。</p>
diff --git a/files/ja/tools/debugger/how_to/set_watch_expressions/index.html b/files/ja/tools/debugger/how_to/set_watch_expressions/index.html
new file mode 100644
index 0000000000..fd232542c4
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/set_watch_expressions/index.html
@@ -0,0 +1,18 @@
+---
+title: 監視式を設定する
+slug: Tools/Debugger/How_to/Set_Watch_Expressions
+translation_of: Tools/Debugger/How_to/Set_Watch_Expressions
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>コードのデバッグで、実行が停止しているときに式を監視すると役に立つことがあります。デバッガーには、監視する式 (監視式) を入力するペインがあります。コードをステップ実行するとデバッガーが式を監視して、その結果を返します。</p>
+
+<p>監視式を設定するには、監視式サイドバーを展開して "監視式を追加" をクリックします。そして、監視したい式をテキストフィールドに入力します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14999/add-watch-expression.png" style="display: block; height: 354px; margin-left: auto; margin-right: auto; width: 417px;"></p>
+
+<p>デバッガーは式を保存して、コードをステップ実行するたびに監視します。デバッガーがブレークポイントに達すると、監視式の変数を表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15007/watched-expression.png" style="display: block; height: 490px; margin-left: auto; margin-right: auto; width: 966px;"></p>
+
+<p>コードをステップ実行することができ、実行するコードが変わるたびに式の値を監視します。値を監視するたびに、ボックスが一時的に黄色く光ります。式の隣にある "x" 印のアイコンをクリックすると監視式を削除できます。また、同時に複数の監視式を持つこともできます。</p>
diff --git a/files/ja/tools/debugger/how_to/step_through_code/index.html b/files/ja/tools/debugger/how_to/step_through_code/index.html
new file mode 100644
index 0000000000..a36b2a3e64
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/step_through_code/index.html
@@ -0,0 +1,25 @@
+---
+title: コードをステップ実行する
+slug: Tools/Debugger/How_to/Step_through_code
+translation_of: Tools/Debugger/How_to/Step_through_code
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>デバッガーがブレークポイントで停止しているときに、<a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a> にある 4 つのボタンを使用してステップ実行ができます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14404/debugger-stepping.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>順番に、以下のボタンがあります:</p>
+
+<ul>
+ <li>復帰: 次のブレークポイントまで実行します。</li>
+ <li>ステップオーバー: 同一関数内で次の行へ進みます。</li>
+ <li>ステップイン: 当該行が関数の呼び出しでなければ、関数内で次の行へ進みます。関数の呼び出しである場合は、呼び出した関数に入ります。</li>
+ <li>ステップアウト: 現在の関数の終端まで実行します。</li>
+</ul>
+
+<p>{{EmbedYouTube("RQBwEk0-xe0")}}</p>
+
+<p>一時停止しているとき、"コンソールペインを表示します" ボタン <img alt="" src="https://mdn.mozillademos.org/files/15017/toggle-console.png" style="height: 25px; width: 30px;"> でウェブコンソールを開閉して、エラーや変数についてさらに洞察を得ることができます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15019/split-console.png" style="display: block; height: 482px; margin-left: auto; margin-right: auto; width: 900px;"></p>
diff --git a/files/ja/tools/debugger/how_to/use_a_source_map/index.html b/files/ja/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..f00604d323
--- /dev/null
+++ b/files/ja/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,43 @@
+---
+title: ソースマップを使用する
+slug: Tools/Debugger/How_to/Use_a_source_map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:</p>
+
+<ul>
+ <li>より効率よくサーバーから提供するためにコンバインおよび <a href="https://en.wikipedia.org/wiki/Minification_(programming)">ミニファイ</a> されることがよくあります。</li>
+ <li><a href="http://coffeescript.org/">CoffeeScript</a> や <a href="http://www.typescriptlang.org/">TypeScript</a> のような言語からコンパイルするように、ページで実行する JavaScript が機械生成されることがあります。</li>
+</ul>
+
+<p>このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。<a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ</a> は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。</p>
+
+<p>デバッガーでソースマップを使用可能にするには、以下のことが必要です:</p>
+
+<ul>
+ <li>ソースマップを生成します。</li>
+ <li>変換後のソースに、ソースマップを指し示すコメントを含めます。コメントは以下のような構文です:</li>
+</ul>
+
+<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>上の動画では <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a> を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:</p>
+
+<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
+
+<p>デバッガーの <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。</p>
+
+<p>最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。</p>
+
+<ol>
+ <li>ブラウザーを開いて about:config と入力します。<br>
+  <img alt="How to open about:config inside firefox." src="https://mdn.mozillademos.org/files/14815/about_1.png" style="height: 149px; width: 700px;"></li>
+ <li>動作保証対象外であることを受け入れます。<br>
+  <img alt="Accept about:config warranty." src="https://mdn.mozillademos.org/files/14817/about_2.png" style="height: 207px; width: 700px;"></li>
+ <li><strong>devtools.source-map.locations.enabled</strong> を検索して <strong>true</strong> に設定します。<br>
+  <img alt="Change the sourcemap boolean value for devtools." src="https://mdn.mozillademos.org/files/14819/about_3.png" style="height: 104px; width: 700px;"></li>
+</ol>
diff --git a/files/ja/tools/debugger/index.html b/files/ja/tools/debugger/index.html
new file mode 100644
index 0000000000..bb317e2874
--- /dev/null
+++ b/files/ja/tools/debugger/index.html
@@ -0,0 +1,72 @@
+---
+title: デバッガー
+slug: Tools/Debugger
+tags:
+  - Debugger
+  - Debugging
+  - Dev Tools
+  - Tools
+  - 'l10n:priority'
+  - ツール
+  - デバッガー
+  - デバッグ
+  - 開発ツール
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<div>JavaScriptデバッガを使用すると、JavaScriptコードをステップ実行してその状態を調べたり変更したりして、バグを追跡することができます。</div>
+
+<div class="note">
+<p>このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。</p>
+
+<p>これより前のバージョンの Firefox や Firefox Beta および Release については、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p>
+
+<p>このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に <code>false</code> を設定してください。</p>
+</div>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。</p>
+
+<p>Firefox でローカル実行しているコードや、例えば Android 版 Firefox が動作する Android デバイスなどのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> のページをご覧ください。</p>
+
+<p>デバッガーは Firefox に内蔵して提供しており、本ページでは Firefox に埋め込まれているデバッガーの使用方法を説明します。一方、デバッガーはスタンドアローンのウェブアプリケーションとして使用することもでき、他のブラウザーや Node で実行しているコードをデバッグできます。詳しくは <a href="https://github.com/devtools-html/debugger.html">プロジェクトの GitHub リポジトリー</a> をご覧ください。</p>
+
+<p>新しいデバッガーは、旧デバッガーの一部機能を (まだ) サポートしていません。<a href="/ja/docs/Tools/Debugger/Limitations_of_the_new_debugger">新しいデバッガーの制限事項</a> をご覧ください。</p>
+
+<hr>
+<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2>
+
+<p>デバッガーについてひととおり理解するために、<a href="/ja/docs/Tools/Debugger/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/How_to/Open_the_debugger">デバッガーを開く</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Set_a_breakpoint">ブレークポイントを設置する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付きブレークポイントを設置する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Disable_breakpoints">ブレークポイントの無効化</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Step_through_code">コードをステップ実行する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Breaking_on_exceptions">例外でブレークする</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Set_Watch_Expressions">監視式を設定する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">圧縮されたファイルを整形表示する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Search">検索する</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">eval ソースをデバッグする</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップを使用する</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger/Keyboard_shortcuts">キーボードショートカット</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/Source_map_errors">ソースマップのエラー</a></li>
+</ul>
+</div>
diff --git a/files/ja/tools/debugger/keyboard_shortcuts/index.html b/files/ja/tools/debugger/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..d152b34a7f
--- /dev/null
+++ b/files/ja/tools/debugger/keyboard_shortcuts/index.html
@@ -0,0 +1,10 @@
+---
+title: キーボードショートカット
+slug: Tools/Debugger/Keyboard_shortcuts
+translation_of: Tools/Debugger/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "debugger")}}</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/limitations_of_the_new_debugger/index.html b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html
new file mode 100644
index 0000000000..b6ef21e414
--- /dev/null
+++ b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html
@@ -0,0 +1,29 @@
+---
+title: 新しいデバッガーの制限事項
+slug: Tools/Debugger/Limitations_of_the_new_debugger
+translation_of: Tools/Debugger/Limitations_of_the_new_debugger
+---
+<div>{{ToolsSidebar}}</div><p>バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。</p>
+
+<p>しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。</p>
+
+<p>これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。</p>
+
+<p>これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に <code>false</code> を設定すると、旧デバッガーに戻すことができます。</p>
+
+<p>以下の機能は、新しいデバッガーでまったくサポートしていません。</p>
+
+<ul>
+ <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/Black_box_a_source">ソースをブラックボックス化する</a></li>
+</ul>
+
+<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">検索機能</a> は部分的にサポートしています。<a href="/ja/docs/Tools/Debugger/How_to/Search">ファイル名の検索やファイル内の文字列の検索</a> は可能です。しかし、以下の検索は未サポートです:</p>
+
+<ul>
+ <li>すべてのファイルにわたって検索する</li>
+ <li>すべてのファイルにわたって関数の定義を検索する</li>
+ <li>特定の行に移動する</li>
+ <li>表示されている変数をフィルタリングする</li>
+</ul>
diff --git a/files/ja/tools/debugger/settings/index.html b/files/ja/tools/debugger/settings/index.html
new file mode 100644
index 0000000000..c72bf0da59
--- /dev/null
+++ b/files/ja/tools/debugger/settings/index.html
@@ -0,0 +1,57 @@
+---
+title: オプション
+slug: Tools/Debugger/Settings
+translation_of: Archive/Tools/Debugger_settings
+---
+<div>{{ToolsSidebar}}</div><p>デバッガーには独自の設定メニューがあり、<a href="/ja/docs/Tools/Debugger/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/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/UI_Tour#Variables_pane" title="#variables-pane"> 変数ペイン </a>が開くようになります。</td>
+  </tr>
+  <tr>
+   <td><strong>計算可能なプロパティのみ表示</strong></td>
+   <td>{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。</td>
+  </tr>
+  <tr>
+   <td><strong>変数フィルタ</strong>ー<strong>ボックスを表示</strong></td>
+   <td>このオプションを有効にすると <a href="/ja/docs/Tools/Debugger/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/How_to/Black_box_a_source"> ブラックボックス化</a> します。デフォルトで有効です。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/tools/debugger/source_map_errors/index.html b/files/ja/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..cac996fd0c
--- /dev/null
+++ b/files/ja/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,58 @@
+---
+title: ソースマップのエラー
+slug: Tools/Debugger/Source_map_errors
+tags:
+  - Debugger
+  - ソースマップ
+  - ツール
+  - デバッグ
+  - リファレンス
+  - 開発ツール
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">ソースマップはJSONファイルで、ブラウザで見られるように変換されたソースを、開発者が書いた元のソースと関連付けることができます。ソースマップを操作する際に問題が発生することがあります。このページでは、最も一般的な問題とその解決方法について説明します。</p>
+
+<div class="note">
+<p><strong>注</strong>: ソースマップが初めての方は、<a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップの使い方</a>で詳細をご覧ください。</p>
+</div>
+
+<h2 id="一般的なソースマップのエラー報告">一般的なソースマップのエラー報告</h2>
+
+<p>問題が見つかると、Webコンソールにメッセージが表示されます。このメッセージには、エラーメッセージ、リソースURL、およびソースマップのURLが表示されます。</p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p>ここでリソースURLは、<code>bundle.js</code>にソースマップが記述されていることを示しています。ソースマップURLは、ソースマップデータの場所（この場合はリソースとの相対位置）を示します。このエラーは、ソースマップがJSONデータではないことを示しているため、間違ったファイルを提供していることになります。</p>
+
+<p>ソースマップが間違っていることがある一般的な方法がいくつかあります。 次のセクションで詳しく説明します。</p>
+
+<h2 id="ソースマップが見つからないかアクセスできない">ソースマップが見つからないかアクセスできない</h2>
+
+<p>ソースマップリソースが見つからない、またはアクセスできない可能性があります。</p>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p>ここではファイルが提供されていることを確認し、ブラウザがアクセスできるようにすることで修正します。</p>
+
+<h2 id="不正なソースマップ">不正なソースマップ</h2>
+
+<p>ソースマップデータは、単にJSONファイルではなく、不正な構造であった時に無効になる可能性があります。一般的なエラーメッセージは次のとおりです。</p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="元のソースがない">元のソースがない</h2>
+
+<p>元のソースが不足している可能性があります。デバッガで元のソースの1つを開こうとすると、この問題が発生することがあります。この場合、メッセージは少し違って見えます：</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p>この場合、エラーはデバッガのソースタブにも表示されます。</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
diff --git a/files/ja/tools/debugger/ui_tour/index.html b/files/ja/tools/debugger/ui_tour/index.html
new file mode 100644
index 0000000000..87b9f58919
--- /dev/null
+++ b/files/ja/tools/debugger/ui_tour/index.html
@@ -0,0 +1,110 @@
+---
+title: UI ツアー
+slug: Tools/Debugger/UI_Tour
+translation_of: Tools/Debugger/UI_Tour
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a></li>
+ <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a></li>
+ <li>3 番目のペインは、さらに 4 つのセクションに分かれます:
+  <ul>
+   <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a></li>
+   <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Breakpoints_list">ブレークポイント一覧</a></li>
+   <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Call_stack">コールスタック</a></li>
+   <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Scopes">スコープ</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14977/debugger-screen-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<h2 id="Source_list_pane" name="Source_list_pane">ソースリストペイン</h2>
+
+<p>ソースリストペインでは、ページに読み込まれたすべての JavaScript ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースはトップレベルでオリジン別に分類しており、またその配下では、ソースを提供するディレクトリーの構造別に分類しています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14975/debugger-source-list-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p><kbd>Ctrl</kbd> + <kbd>P</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>P</kbd>) を使用して <a href="/ja/docs/Tools/Debugger/How_to/Search#Searching_for_files">ファイルを検索</a> できます。</p>
+
+<p> </p>
+
+<p>興味のあるディレクトリを右クリックし、[Set directory root] を選択すると、[Source] リストペインのファイルリストが簡素化されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16122/directory-root.png" style="border-style: solid; border-width: 1px; height: 408px; width: 480px;"></p>
+
+<p>これでソースリストペインのルートがプロジェクトのルートになり、よりクリーンで簡単に表示をナビゲートできます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16123/directory-root-02.png" style="border-style: solid; border-width: 1px; height: 408px; width: 480px;"></p>
+
+<h3 id="アウトラインビュー">アウトラインビュー</h3>
+
+<p>アウトラインビューには、現在開いているファイルをナビゲートするためのツリーが表示されます。それを使用して、関数、クラスまたはメソッド定義に直接ジャンプします。</p>
+
+<p> </p>
+
+<h2 id="Source_pane" name="Source_pane">ソースペイン</h2>
+
+<p>これは、現在読み込んでいる JavaScript ファイルを表示します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14973/debugger-source-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p>ソースペインにフォーカスがあるときに、<kbd>Ctrl</kbd> + <kbd>F</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>F</kbd>) を使用して <a href="/ja/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">ファイル内の文字列を検索</a> できます。</p>
+
+<p><a href="/ja/docs/Tools/Debugger/How_to/Set_a_breakpoint">ブレークポイント</a> は、青色の矢印を行番号に重ねて表示します。<a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付きブレークポイント</a> は、橙色の矢印です。ブレークポイントで停止すると、行全体が緑色になります。以下のスクリーンショットには、ブレークポイントが 3 か所あります:</p>
+
+<ul>
+ <li>19 行目は通常のブレークポイントです。</li>
+ <li>40 行目は通常のブレークポイントであり、デバッガーはここで停止しています。</li>
+ <li>22 行目は条件付きブレークポイントです。</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14981/debugger-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<h2 id="Toolbar" name="Toolbar"><a name="toolbar">ツールバー</a></h2>
+
+<p>右側のペインの上部にツールバーがあります:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14971/debugger-toolbar-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p>ツールバーの構成は以下のとおりです:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Step_through_code">スクリプト内でデバッガーの動作を制御する</a> 4 つのボタン:
+
+  <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>
+ </li>
+ <li><a href="/ja/docs/Tools/Debugger/How_to/Breaking_on_exceptions">(1) すべての例外を無視する、(2) キャッチしていない例外で停止する、(3) すべての例外で停止する</a> を切り替えるボタン</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14979/debugger-toolbar-zoom-2.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 536px;"></p>
+
+<h2 id="Breakpoints_list" name="Breakpoints_list">ブレークポイント一覧</h2>
+
+<p>ツールバーの下に、設定したすべてのブレークポイントを表示します。それぞれのブレークポイントの隣に、<a href="/ja/docs/Tools/Debugger/How_to/Disable_breakpoints">ブレークポイントの有効/無効を切り替える</a> チェックボックスがあります:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14969/debugger-breakpoints-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<h2 id="Call_stack" name="Call_stack">コールスタック</h2>
+
+<p>デバッガーが停止したときに、コールスタックを表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14967/debugger-call-stack-2.png" style="display: block; height: 1138px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p>コールスタックはそれぞれのレベルに 1 行ずつ割り当てており、関数名・ファイル名・行番号を表示します。行をクリックすると、ソースペインでソースを開きます。</p>
+
+<h2 id="Scopes" name="Scopes">スコープ</h2>
+
+<p>右側のペインに、展開用の三角印がついている "スコープ" というラベルがあります。デバッガーが停止したときにこのセクションを展開すると、プログラムのその時点でスコープ内に存在するすべてのオブジェクトを確認できます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14965/debugger-scopes-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p>オブジェクトはスコープ別に分類します。もっともローカル性が高いオブジェクトを最初に、またグローバルスコープ (ページのスクリプトでは Window) を最後に表示します。</p>