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 ++++++++++++++ 18 files changed, 455 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 (limited to 'files/ja/tools/debugger/how_to') 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. +
-- cgit v1.2.3-54-g00ecf