diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/tools/debugger/how_to | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip |
unslug ja: move
Diffstat (limited to 'files/ja/tools/debugger/how_to')
-rw-r--r-- | files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html | 23 | ||||
-rw-r--r-- | files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html | 47 | ||||
-rw-r--r-- | files/ja/tools/debugger/how_to/ignore_a_source/index.html (renamed from files/ja/tools/debugger/how_to/black_box_a_source/index.html) | 0 | ||||
-rw-r--r-- | files/ja/tools/debugger/how_to/search_and_filter/index.html | 69 |
4 files changed, 0 insertions, 139 deletions
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 ---- -<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/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' ---- -<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/black_box_a_source/index.html b/files/ja/tools/debugger/how_to/ignore_a_source/index.html index 0378307727..0378307727 100644 --- a/files/ja/tools/debugger/how_to/black_box_a_source/index.html +++ b/files/ja/tools/debugger/how_to/ignore_a_source/index.html 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 ---- -<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> |