From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../debugger/how_to/black_box_a_source/index.html | 20 ------- .../how_to/break_on_a_dom_event/index.html | 23 -------- .../index.html | 47 --------------- .../debugger/how_to/ignore_a_source/index.html | 20 +++++++ .../debugger/how_to/search_and_filter/index.html | 69 ---------------------- 5 files changed, 20 insertions(+), 159 deletions(-) delete mode 100644 files/ja/tools/debugger/how_to/black_box_a_source/index.html delete mode 100644 files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html delete mode 100644 files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger/how_to/ignore_a_source/index.html delete mode 100644 files/ja/tools/debugger/how_to/search_and_filter/index.html (limited to 'files/ja/tools/debugger/how_to') 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 deleted file mode 100644 index 0378307727..0000000000 --- a/files/ja/tools/debugger/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -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 deleted file mode 100644 index 4aca9399f6..0000000000 --- a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM イベントでブレークする -slug: Tools/Debugger/How_to/Break_on_a_DOM_event -translation_of: Tools/Debugger/Break_on_DOM_mutation -translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
-

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

- -

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

-
- -

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

- -

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

- -

- -

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

- -

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

- -

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

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 deleted file mode 100644 index 74c0db4345..0000000000 --- a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 変数を調査、編集、ウォッチする -slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' -translation_of: Tools/Debugger/How_to/Set_Watch_Expressions -translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' ---- -
{{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/ignore_a_source/index.html b/files/ja/tools/debugger/how_to/ignore_a_source/index.html new file mode 100644 index 0000000000..0378307727 --- /dev/null +++ b/files/ja/tools/debugger/how_to/ignore_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/search_and_filter/index.html b/files/ja/tools/debugger/how_to/search_and_filter/index.html deleted file mode 100644 index 4f3391c8b1..0000000000 --- a/files/ja/tools/debugger/how_to/search_and_filter/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 検索とフィルタ -slug: Tools/Debugger/How_to/Search_and_filter -translation_of: Tools/Debugger/How_to/Search -translation_of_original: Tools/Debugger/How_to/Search_and_filter ---- -
{{ToolsSidebar}}

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

- -

- -

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

- -

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

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

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

- -

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

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

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

- -

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

- - - - - - - - - - - - -
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
-- cgit v1.2.3-54-g00ecf