From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../how_to/access_debugging_in_add-ons/index.html | 26 +++++ .../debugger/how_to/black_box_a_source/index.html | 20 ++++ .../how_to/break_on_a_dom_event/index.html | 22 +++++ .../how_to/breaking_on_exceptions/index.html | 18 ++++ .../debugger/how_to/debug_eval_sources/index.html | 29 ++++++ .../debugger/how_to/disable_breakpoints/index.html | 12 +++ .../index.html | 46 +++++++++ .../highlight_and_inspect_dom_nodes/index.html | 16 +++ files/ja/tools/debugger/how_to/index.html | 14 +++ .../debugger/how_to/open_the_debugger/index.html | 16 +++ .../how_to/pretty-print_a_minified_file/index.html | 20 ++++ files/ja/tools/debugger/how_to/search/index.html | 18 ++++ .../debugger/how_to/search_and_filter/index.html | 68 +++++++++++++ .../debugger/how_to/set_a_breakpoint/index.html | 28 ++++++ .../how_to/set_a_conditional_breakpoint/index.html | 16 +++ .../how_to/set_watch_expressions/index.html | 18 ++++ .../debugger/how_to/step_through_code/index.html | 25 +++++ .../debugger/how_to/use_a_source_map/index.html | 43 ++++++++ files/ja/tools/debugger/index.html | 72 ++++++++++++++ .../tools/debugger/keyboard_shortcuts/index.html | 10 ++ .../limitations_of_the_new_debugger/index.html | 29 ++++++ files/ja/tools/debugger/settings/index.html | 57 +++++++++++ .../ja/tools/debugger/source_map_errors/index.html | 58 +++++++++++ files/ja/tools/debugger/ui_tour/index.html | 110 +++++++++++++++++++++ 24 files changed, 791 insertions(+) create mode 100644 files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/ja/tools/debugger/how_to/black_box_a_source/index.html create mode 100644 files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html create mode 100644 files/ja/tools/debugger/how_to/breaking_on_exceptions/index.html create mode 100644 files/ja/tools/debugger/how_to/debug_eval_sources/index.html create mode 100644 files/ja/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/ja/tools/debugger/how_to/index.html create mode 100644 files/ja/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/ja/tools/debugger/how_to/search/index.html create mode 100644 files/ja/tools/debugger/how_to/search_and_filter/index.html create mode 100644 files/ja/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/ja/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/ja/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/ja/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/ja/tools/debugger/index.html create mode 100644 files/ja/tools/debugger/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/debugger/limitations_of_the_new_debugger/index.html create mode 100644 files/ja/tools/debugger/settings/index.html create mode 100644 files/ja/tools/debugger/source_map_errors/index.html create mode 100644 files/ja/tools/debugger/ui_tour/index.html (limited to 'files/ja/tools/debugger') 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 +--- +
{{ToolsSidebar}}
+

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

+
+ +

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

+ + + +

関連ファイル:

+ + + +

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

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 +--- +

{{ToolsSidebar}}

+ +

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

+ +

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

+ +

+ +

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

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

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

+ +

古いデバッガーのドキュメントは、デバッガー (Firefox 52 より前) をご覧ください。

+
+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

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

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 +--- +

{{ToolsSidebar}}

+ +

ツールバー でアイコン をクリックすると、例外 で停止するようにデバッガーを指定できます。

+ +

{{EmbedYouTube("UWIO_UM827k")}}

+ +

ボタンは 3 種類の状態があり、クリックするたびに次の状態へ切り替わります。

+ +

: 例外で停止しません。これは初期状態です。

+ +

: キャッチしていない 例外に限り停止します。

+ +

: すべての例外で停止します。

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 +--- +

{{ToolsSidebar}}

+ +

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

+ +

以下の動画では、このようなソースを含むページを読み込んでいます:

+ +
var script = `function foo() {
+               console.log('called foo');
+             }
+             //# sourceURL=my-foo.js`;
+
+eval(script);
+
+var button = document.getElementById("foo");
+button.addEventListener("click", foo, false);
+
+ +

評価された文字列は、//# sourceURL ディレクティブを使用して "my-foo.js" という名称が与えられます。このソースは ソースリストペイン に表示されて、他のソースと同様に開いたりデバッグしたりできます。

+ +

{{EmbedYouTube("AkvN40-y1NE")}}

+ +

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

+ +

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

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 +--- +

{{ToolsSidebar}}

+ +

ブレークポイントを 1 つ無効化するには、ブレークポイント一覧 でブレークポイントの隣にあるチェックボックスのチェックを外します。

+ +

すべてのブレークポイントを無効化するには、ツールバー でアイコン をクリックします。

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

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

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

+ +

古いデバッガーのドキュメントは、デバッガー (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/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 +--- +
{{ToolsSidebar}}
+

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

+ +

古いデバッガーのドキュメントは、デバッガー (Firefox 52 より前) をご覧ください。

+
+ +

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

+ +

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

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

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 +--- +
{{ToolsSidebar}}
+ +
これらの記事では、デバッガの使用方法について説明します。
+ +
 
+ +

{{ ListSubpages () }}

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 +--- +

{{ToolsSidebar}}

+ +

デバッガーを開く方法は 3 つあります:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

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 +--- +

{{ToolsSidebar}}

+ +

ソースペイン のアイコン をクリックすると、圧縮された (minified) ファイルを整形します。デバッガーは整形したソースを表示して、"[original-name]:formatted" というような名前の新しいファイルとして表示します。

+ +

{{EmbedYouTube("6kQrjS82rME")}}

+ +
+
+
+

メモ: インライン JavaScript コードをあらかじめ確認したい場合は、インスペクタペインのコードをダブルクリックしてください。

+
+
+
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 +--- +

{{ToolsSidebar}}

+ +

ファイルを検索する

+ +

特定のファイルを検索するには、Control + P (Mac では Command + P) を押下して検索文字列を入力します。入力内容に応じて、マッチするすべてのファイルを ソースペイン に表示します。上下矢印キーでリスト内を移動することができ、Return を押下するとファイルを開きます:

+ +

{{EmbedYouTube("xXsfYx0THWg")}}

+ +

ファイル内で検索する

+ +

ソースペイン に読み込んでいるファイル内で特定の文字列を検索するには、ソースペインにフォーカスがある状態で Control + F (Mac では Command + F) を押下します。Return を押下すると検索します。デバッガーはコード内でマッチした数を表示して、それぞれの箇所を枠で囲みます:

+ +

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

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

+ +

+ +

接頭辞をつけずに文字列を入力すると、ソースリストペインに一覧表示されているソースから検索します。

+ +

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

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

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

+ +

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

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

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

+ +

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

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

{{ToolsSidebar}}

+ +

以下のいずれかの方法で、ブレークポイントを設置できます:

+ + + +

以下の動画は、コンテキストメニューを使用してブレークポイントを設置しています:

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

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

+ + 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 +--- +

{{ToolsSidebar}}

+ +

通常のブレークポイントは、行に関連付けられます。プログラムがその行に達すると、デバッガーは停止します。条件付きブレークポイントは条件も関連付けられており、条件は 式 で表します。プログラムがその行に達すると、式が true に評価された場合に限りデバッガーが停止します。

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

条件付きブレークポイントを設置するには ソースペイン でコンテキストメニューを開いて、[条件付きブレークポイントを追加] を選択します。すると、式を入力できるテキストボックスが現れます。最後に Return を押下すると完了します。

+ +

条件付きブレークポイントは、行番号に橙色の矢印を重ねて表示します。

+ +

ブレークポイントをコンテキストクリックすると、[ブレークポイントを編集] というメニュー項目があります。既存の条件を変更したり、通常のブレークポイントに条件を追加したりできます。

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 +--- +

{{ToolsSidebar}}

+ +

コードのデバッグで、実行が停止しているときに式を監視すると役に立つことがあります。デバッガーには、監視する式 (監視式) を入力するペインがあります。コードをステップ実行するとデバッガーが式を監視して、その結果を返します。

+ +

監視式を設定するには、監視式サイドバーを展開して "監視式を追加" をクリックします。そして、監視したい式をテキストフィールドに入力します。

+ +

+ +

デバッガーは式を保存して、コードをステップ実行するたびに監視します。デバッガーがブレークポイントに達すると、監視式の変数を表示します:

+ +

+ +

コードをステップ実行することができ、実行するコードが変わるたびに式の値を監視します。値を監視するたびに、ボックスが一時的に黄色く光ります。式の隣にある "x" 印のアイコンをクリックすると監視式を削除できます。また、同時に複数の監視式を持つこともできます。

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 +--- +

{{ToolsSidebar}}

+ +

デバッガーがブレークポイントで停止しているときに、ツールバー にある 4 つのボタンを使用してステップ実行ができます:

+ +

+ +

順番に、以下のボタンがあります:

+ + + +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

一時停止しているとき、"コンソールペインを表示します" ボタン でウェブコンソールを開閉して、エラーや変数についてさらに洞察を得ることができます:

+ +

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 +--- +

{{ToolsSidebar}}

+ +

ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:

+ + + +

このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。ソースマップ は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。

+ +

デバッガーでソースマップを使用可能にするには、以下のことが必要です:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

上の動画では https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:

+ +
//# sourceMappingURL=main.js.map
+ +

デバッガーの ソースリストペイン では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。

+ +

最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。

+ +
    +
  1. ブラウザーを開いて about:config と入力します。
    + How to open about:config inside firefox.
    2. +
  2. 動作保証対象外であることを受け入れます。
    + Accept about:config warranty.
    3. +
  3. devtools.source-map.locations.enabled を検索して true に設定します。
    + Change the sourcemap boolean value for devtools.
    4. +
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 +--- +
{{ToolsSidebar}}
+ +
JavaScriptデバッガを使用すると、JavaScriptコードをステップ実行してその状態を調べたり変更したりして、バグを追跡することができます。
+ +
+

このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。

+ +

これより前のバージョンの Firefox や Firefox Beta および Release については、デバッガー (Firefox 52 より前) をご覧ください。

+ +

このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定してください。

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

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

+ +

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

+ +

デバッガーは Firefox に内蔵して提供しており、本ページでは Firefox に埋め込まれているデバッガーの使用方法を説明します。一方、デバッガーはスタンドアローンのウェブアプリケーションとして使用することもでき、他のブラウザーや Node で実行しているコードをデバッグできます。詳しくは プロジェクトの GitHub リポジトリー をご覧ください。

+ +

新しいデバッガーは、旧デバッガーの一部機能を (まだ) サポートしていません。新しいデバッガーの制限事項 をご覧ください。

+ +
+

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

+ +

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

+ +
+

使い方

+ +

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

+ +
+ +
+ +
+

リファレンス

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

{{Page ("ja/docs/tools/Keyboard_shortcuts", "debugger")}}

+ +

共通ショートカット

+ +

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

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

バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。

+ +

しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。

+ +

これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。

+ +

これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定すると、旧デバッガーに戻すことができます。

+ +

以下の機能は、新しいデバッガーでまったくサポートしていません。

+ + + +

検索機能 は部分的にサポートしています。ファイル名の検索やファイル内の文字列の検索 は可能です。しかし、以下の検索は未サポートです:

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

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

+ +

+ +

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

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

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

+ +

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

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

Firefox 33 の新機能

+
+ +

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

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

ソースマップはJSONファイルで、ブラウザで見られるように変換されたソースを、開発者が書いた元のソースと関連付けることができます。ソースマップを操作する際に問題が発生することがあります。このページでは、最も一般的な問題とその解決方法について説明します。

+ +
+

注: ソースマップが初めての方は、ソースマップの使い方で詳細をご覧ください。

+
+ +

一般的なソースマップのエラー報告

+ +

問題が見つかると、Webコンソールにメッセージが表示されます。このメッセージには、エラーメッセージ、リソースURL、およびソースマップのURLが表示されます。

+ +

Error from invalid JSON

+ +

ここでリソースURLは、bundle.jsにソースマップが記述されていることを示しています。ソースマップURLは、ソースマップデータの場所（この場合はリソースとの相対位置）を示します。このエラーは、ソースマップがJSONデータではないことを示しているため、間違ったファイルを提供していることになります。

+ +

ソースマップが間違っていることがある一般的な方法がいくつかあります。 次のセクションで詳しく説明します。

+ +

ソースマップが見つからないかアクセスできない

+ +

ソースマップリソースが見つからない、またはアクセスできない可能性があります。

+ +

Source map file is missing

+ +

ここではファイルが提供されていることを確認し、ブラウザがアクセスできるようにすることで修正します。

+ +

不正なソースマップ

+ +

ソースマップデータは、単にJSONファイルではなく、不正な構造であった時に無効になる可能性があります。一般的なエラーメッセージは次のとおりです。

+ + + +

Error: "version" is a required argument

+ +

元のソースがない

+ +

元のソースが不足している可能性があります。デバッガで元のソースの1つを開こうとすると、この問題が発生することがあります。この場合、メッセージは少し違って見えます：

+ +

Debugger source tab showing the error

+ +

この場合、エラーはデバッガのソースタブにも表示されます。

+ +

Debugger source tab showing the error

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 +--- +

{{ToolsSidebar}}

+ +

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。

+ + + +

+ +

ソースリストペイン

+ +

ソースリストペインでは、ページに読み込まれたすべての JavaScript ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースはトップレベルでオリジン別に分類しており、またその配下では、ソースを提供するディレクトリーの構造別に分類しています。

+ +

+ +

Ctrl + P (Mac では Cmd + P) を使用して ファイルを検索 できます。

+ +

 

+ +

興味のあるディレクトリを右クリックし、[Set directory root] を選択すると、[Source] リストペインのファイルリストが簡素化されます。

+ +

+ +

これでソースリストペインのルートがプロジェクトのルートになり、よりクリーンで簡単に表示をナビゲートできます。

+ +

+ +

アウトラインビュー

+ +

アウトラインビューには、現在開いているファイルをナビゲートするためのツリーが表示されます。それを使用して、関数、クラスまたはメソッド定義に直接ジャンプします。

+ +

 

+ +

ソースペイン

+ +

これは、現在読み込んでいる JavaScript ファイルを表示します。

+ +

+ +

ソースペインにフォーカスがあるときに、Ctrl + F (Mac では Cmd + F) を使用して ファイル内の文字列を検索 できます。

+ +

ブレークポイント は、青色の矢印を行番号に重ねて表示します。条件付きブレークポイント は、橙色の矢印です。ブレークポイントで停止すると、行全体が緑色になります。以下のスクリーンショットには、ブレークポイントが 3 か所あります:

+ + + +

+ +

ツールバー

+ +

右側のペインの上部にツールバーがあります:

+ +

+ +

ツールバーの構成は以下のとおりです:

+ + + +

+ +

ブレークポイント一覧

+ +

ツールバーの下に、設定したすべてのブレークポイントを表示します。それぞれのブレークポイントの隣に、ブレークポイントの有効/無効を切り替える チェックボックスがあります:

+ +

+ +

コールスタック

+ +

デバッガーが停止したときに、コールスタックを表示します:

+ +

+ +

コールスタックはそれぞれのレベルに 1 行ずつ割り当てており、関数名・ファイル名・行番号を表示します。行をクリックすると、ソースペインでソースを開きます。

+ +

スコープ

+ +

右側のペインに、展開用の三角印がついている "スコープ" というラベルがあります。デバッガーが停止したときにこのセクションを展開すると、プログラムのその時点でスコープ内に存在するすべてのオブジェクトを確認できます:

+ +

+ +

オブジェクトはスコープ別に分類します。もっともローカル性が高いオブジェクトを最初に、またグローバルスコープ (ページのスクリプトでは Window) を最後に表示します。

-- cgit v1.2.3-54-g00ecf