From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../disable_breakpoints/index.html | 18 +++ .../how_to/access_debugging_in_add-ons/index.html | 32 +++++ .../how_to/black_box_a_source/index.html | 28 +++++ .../how_to/break_on_a_dom_event/index.html | 22 ++++ .../how_to/debug_eval_sources/index.html | 36 ++++++ .../how_to/disable_breakpoints/index.html | 22 ++++ .../index.html | 46 ++++++++ .../highlight_and_inspect_dom_nodes/index.html | 16 +++ .../debugger_(before_firefox_52)/how_to/index.html | 13 +++ .../how_to/open_the_debugger/index.html | 21 ++++ .../how_to/pretty-print_a_minified_file/index.html | 18 +++ .../how_to/search_and_filter/index.html | 74 ++++++++++++ .../how_to/set_a_breakpoint/index.html | 29 +++++ .../how_to/set_a_conditional_breakpoint/index.html | 22 ++++ .../how_to/step_through_code/index.html | 21 ++++ .../how_to/use_a_source_map/index.html | 20 ++++ .../tools/debugger_(before_firefox_52)/index.html | 55 +++++++++ .../keyboard_shortcuts/index.html | 16 +++ .../settings/index.html | 63 ++++++++++ .../ui_tour/index.html | 129 +++++++++++++++++++++ 20 files changed, 701 insertions(+) create mode 100644 files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/settings/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html (limited to 'files/ja/tools/debugger_(before_firefox_52)') 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 +--- +
{{ToolsSidebar}}
+ +

ブレークポイントを無効にするには、ソースリストペインでブレークポイントのエントリの横にあるチェックボックスをオフにします。

+ +

+ +

または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。

+ +

ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。

+ +

すべてのブレークポイントを無効/有効にするには、ソースリストペインで"Toggle all breakpoints"ボタンを使用します。

+ +

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +
+

このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。

+
+ +

以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:

+ + + +

関連ファイル:

+ + + +

残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ 653545 をご覧ください)

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

+ +

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

+ +

+ +

開発ツールバー を開いて dbg blackbox コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:

+ +

+ +

ソースをブラックボックス化すると以下のようになります:

+ + 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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

+ +

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

+ +

+ +

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

+ +

イベントが発生すると、リスナーの始点でコードがブレークします。

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。

+ +

これを行うために、//# sourceURL ディレクティブを使用してソースに名前をつけなければなりません:

+ +
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);
+}
+ +

これは、スクリプトに "my-foo.js" という名前をつけます。

+ +

文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを 整形 できます:

+ +

{{EmbedYouTube("nFm8F8Anmic")}}

+ +

ソースにつけた名前は、ウェブコンソール に現れるスタックトレースでも表示されます。

+ +

また、無名の eval ソース内にある debugger; 文でもデバッガーが停止します。

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

ソースリストペイン で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:

+ +

+ +

または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。

+ +

ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。

+ +

すべてのブレークポイントのオン/オフを切り替えるには、ソースリストペイン で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:

+ +

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' +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

変数を調査する

+ +

コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます:

+ +

+ +

変数はスコープによってグループ化されます: Function スコープには user や greeting といった関数で定義したローカル変数はもちろん、ビルトインの arguments および this 変数も表示します。同様にグローバルスコープでは localStorage や console といったビルトインのグローバル変数だけでなく、greetme といった独自に定義したグローバル変数も表示します。

+ +

それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。

+ +

変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは Object.defineProperty() をご覧ください。

+ +

スクリプトフィルター で "*" 修飾子を使用するか、(デバッガーの設定 で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。

+ +

{{EmbedYouTube("dxCvnixpM_Q")}}

+ +

ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は (optimized away) となっており、編集ができません。以下のスクリーンショットでは、変数 upvar が最適化で削除されています:

+ +

+ +

変数を変更する

+ +

コードがブレークポイントで停止したときに、デバッガーの 変数ペイン で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:

+ +

{{EmbedYouTube("FKG-jkvSpq8")}}

+ +

式をウォッチする

+ +

ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。[ウォッチ式を追加] と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。

+ +

そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:

+ +

{{EmbedYouTube("CwGU-5wKRw0")}}

+ +

コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある [x] 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。

+ +

また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した インスペクター が開きます。

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

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 +--- +
{{ToolsSidebar}}
+ +

これらの記事では、デバッガの使用方法について説明します。

+ +

{{ ListSubpages () }}

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

メニューボタン ( new fx menu ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:

+ + + +

インスペクターがアクティブになっている ツールボックス が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:

+ +

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:

+ +

+ +

ファイルを読みやすい形式で表示します。

+ +

デバッガーの設定 で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

ツールバー のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます:

+ +

+ +

接頭辞をつけずに文字列を入力すると、ソースリストペイン に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。

+ +

いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
接頭辞機能
なしソースリストペイン に表示しているスクリプトの絞り込みを行います。
!すべてのファイルから文字列を検索します。
@すべてのファイルから、文字列を含む関数定義を検索します。
# +

現在 ソースペイン で開いているファイルから文字列を検索します。

+ +

検索した後に Enter キーを押下すると、マッチした箇所を巡ります。

+
:現在 ソースペイン で開いているファイルで、指定した行へ移動します。
*変数ペイン に表示している変数の絞り込みを行います。
+ +

これらのオプションは、フィルター内をクリックしたときにポップアップ表示します。また、ソースペイン のコンテキストメニューでもアクセスできます。

+ +

接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:

+ + + + + + + + + + + + +
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。

+ + + +

それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:

+ + + +

以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:

+ +

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

条件付きブレークポイントを設置するには ソースペイン で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:

+ +

+ +

条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:

+ +

+ +

条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:

+ +

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

コードがブレークポイントで止まったときは、ツールバー の左側にある 4 つのボタンを使用してステップ実行を実施できます:

+ +

ボタンは順に以下のとおりです:

+ + 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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。ソースマップ の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。

+ +

デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[デバッガーのオプション] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:

+ +

+ +

もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:

+ +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
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) +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。

+ +

Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、リモートデバッグ のページをご覧ください。

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

ユーザーインターフェイスツアー

+ +

デバッガーについてひととおり理解するために、 UI のクイックツアー を用意しました。

+ +
+

使い方

+ +

デバッガーで何ができるかを知るために、以下のガイドをご覧ください:

+ +
+ +
+ +
+

リファレンス

+ +
+ +
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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}

+ +

共通ショートカット

+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}

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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます:

+ +

+ +

それぞれのオプションは、オン/オフの切り替え式になっています:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
圧縮されたソースを自動的に整形表示このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して 整形 します。
例外発生で停止このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。
キャッチした例外を無視 +

このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。

+ +

これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。

+
起動時にデバッガを開くこのオプションが有効であるときは、始めにデバッガーを起動した時点で 変数ペイン が開くようになります。
計算可能なプロパティのみ表示{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。
変数フィルターボックスを表示このオプションを有効にすると 変数ペイン に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。
元のソースを表示このオプションを有効にすると、デバッガーは可能であれば ソースマップ を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。
圧縮されたソースを自動的にブラックボックス化する +
+

Firefox 33 の新機能

+
+ +

URL の末尾が ".min.js" であるソースファイルを自動的に ブラックボックス化 します。デフォルトで有効です。

+
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 +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:

+ + + +

+ +

ツールバー

+ +

ツールバーは 4 つのセクションで構成されます:

+ + + +

+ +

左側にある 4 つのボタンは、以下の機能を実行します:

+ + + +

コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。

+ +

ソースリストペイン

+ +

ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと コールスタックペイン は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。

+ +

+ +

ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは ソースペイン に読み込みます。

+ +


+ ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:

+ + + +

ソースリストの下部にある 3 個のアイコンで、ソースのブラックボックス化、圧縮された JS ファイルの整形、すべてのブレークポイントの有効/無効 の切り替えが可能です。

+ +

ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:

+ +

+ +

コールスタックペイン

+ +

デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:

+ +

+ +

各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。

+ +

ソースペイン

+ +

+ +

ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:

+ +

ソースペインでは、コンテキストメニューで以下の操作が可能です:

+ + + +

Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。control キー (Mac OS X では command キー) を押下しながら、関数名をクリックしてください。

+ +

変数のポップアップ

+ +

ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:

+ +

+ +

この機能により 変数ペイン を開いて検索することなく、すばやく変数の値を確認できます。

+ +

変数ペイン

+ +

変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:

+ +

+ +

変数ペインは画面領域を イベントペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

+ +

イベントペイン

+ +

イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:

+ +

+ +

これは画面領域を 変数ペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

+ +

イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:

+ +
[イベント名] on [イベントターゲット] in [ソースファイル]
+ +

イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。

-- cgit v1.2.3-54-g00ecf