diff options
Diffstat (limited to 'files/ja/conflicting/tools')
9 files changed, 674 insertions, 0 deletions
diff --git a/files/ja/conflicting/tools/debugger/how_to/search/index.html b/files/ja/conflicting/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..314df5c651 --- /dev/null +++ b/files/ja/conflicting/tools/debugger/how_to/search/index.html @@ -0,0 +1,70 @@ +--- +title: 検索とフィルタ +slug: conflicting/Tools/Debugger/How_to/Search +translation_of: Tools/Debugger/How_to/Search +translation_of_original: Tools/Debugger/How_to/Search_and_filter +original_slug: 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> diff --git a/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html b/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..549856b56e --- /dev/null +++ b/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,48 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: conflicting/Tools/Debugger/How_to/Set_Watch_Expressions +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: Tools/Debugger/How_to/Examine,_modify,_and_watch_variables +original_slug: 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/conflicting/tools/keyboard_shortcuts/index.html b/files/ja/conflicting/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..5450912878 --- /dev/null +++ b/files/ja/conflicting/tools/keyboard_shortcuts/index.html @@ -0,0 +1,101 @@ +--- +title: ソースエディタの使用 +slug: conflicting/tools/Keyboard_shortcuts +translation_of: tools/Keyboard_shortcuts#Source_editor +translation_of_original: Tools/Using_the_Source_Editor +original_slug: Tools/Using_the_Source_Editor +--- +<div>{{ToolsSidebar}}</div><p>ソースエディタは <a href="/ja/JavaScript_code_modules/source-editor.jsm" title="source-editor.jsm"><code>source-editor.jsm</code></a> によって提供されるエディタコンポーネントで、<a href="/ja/Tools/Scratchpad" title="Scratchpad">スクラッチパッド</a> や <a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a> などの開発ツールで共用しています。また、<a href="/ja/JavaScript_code_modules/Using_the_Source_Editor_API" title="Using the Source Editor API">Firefox の拡張機能から使用する</a>こともできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。</p> + +<h2 id="キーボードコマンド">キーボードコマンド</h2> + +<p>以下は、各コマンドの標準的なキーボードショートカットです。これは一部のアドオンで異なる場合があることに注意してください。ただし、Firefox では常にこれらを使用します。</p> + +<div class="note"><strong>注意:</strong> Mac OS X では、control キーの代わりに Command キーを使用します。</div> + +<p> </p> + +<table class="standard-table" style="width: auto;"> + <thead> + <tr> + <th class="header">機能</th> + <th class="header">キーボード</th> + </tr> + </thead> + <tbody> + <tr> + <td>すべて選択</td> + <td>Ctrl-A</td> + </tr> + <tr> + <td>コピー</td> + <td>Ctrl-C</td> + </tr> + <tr> + <td>検索</td> + <td>Ctrl-F</td> + </tr> + <tr> + <td>再検索</td> + <td>Ctrl-G</td> + </tr> + <tr> + <td>指定行へ移動</td> + <td>Ctrl-L</td> + </tr> + <tr> + <td>やり直し</td> + <td>Ctrl-Shift-Z</td> + </tr> + <tr> + <td>貼り付け</td> + <td>Ctrl-V</td> + </tr> + <tr> + <td>切り取り</td> + <td>Ctrl-X</td> + </tr> + <tr> + <td>元に戻す</td> + <td>Ctrl-Z</td> + </tr> + <tr> + <td>行のインデント</td> + <td>Tab</td> + </tr> + <tr> + <td>行のインデント解除</td> + <td>Shift-Tab</td> + </tr> + <tr> + <td>前の行へ移動</td> + <td>Alt-↑ (Mac OS X では Ctrl-Option-↑)</td> + </tr> + <tr> + <td>後の行へ移動</td> + <td>Alt-↓ (Mac OS X では Ctrl-Option-↓)</td> + </tr> + <tr> + <td>選択範囲のコメント化とコメント解除</td> + <td>Ctrl-/ {{ fx_minversion_inline("14.0") }}</td> + </tr> + <tr> + <td>開き括弧へ移動</td> + <td>Ctrl-[ {{ fx_minversion_inline("14.0") }}</td> + </tr> + <tr> + <td>閉じ括弧へ移動</td> + <td>Ctlr-] {{ fx_minversion_inline("14.0") }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/Tools" title="Tools">Tools</a></li> + <li><a href="/ja/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> + <li><a href="/ja/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> +</ul> diff --git a/files/ja/conflicting/tools/memory/basic_operations/index.html b/files/ja/conflicting/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..cfaf1f0c45 --- /dev/null +++ b/files/ja/conflicting/tools/memory/basic_operations/index.html @@ -0,0 +1,16 @@ +--- +title: ヒープのスナップショットを比較する +slug: conflicting/Tools/Memory/Basic_operations +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Comparing_heap_snapshots +original_slug: Tools/Memory/Comparing_heap_snapshots +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>これは Firefox 45 の新機能です。</p> +</div> + +<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。</p> + +<p>差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。</p> + +<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p> diff --git a/files/ja/conflicting/tools/page_inspector/index.html b/files/ja/conflicting/tools/page_inspector/index.html new file mode 100644 index 0000000000..53ac258b35 --- /dev/null +++ b/files/ja/conflicting/tools/page_inspector/index.html @@ -0,0 +1,70 @@ +--- +title: Style panel +slug: conflicting/Tools/Page_Inspector +translation_of: Tools/Page_Inspector#CSS_pane +translation_of_original: Tools/Page_Inspector/Style_panel +original_slug: Tools/Page_Inspector/Style_panel +--- +<div>{{ToolsSidebar}}</div><p>ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。</p> + +<p>{{ 英語版章題("The Rules view") }}</p> + +<h2 id="ルールビュー">ルールビュー</h2> + +<p><img alt="style-rules.png" class="internal lwrap" src="/@api/deki/files/6075/=style-rules.png" style="float: left;">ルールビュー (左図) では、スタイルが<a href="/ja/DOM/stylesheet" title="stylesheet">スタイルシート</a>の編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の <code>style</code> 属性を用いて適用されたスタイルをリスト化します。</p> + +<p>継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。</p> + +<p>また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用／非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。</p> + +<p>加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。</p> + +<p>閉じ括弧 ("<span class="nowiki">}</span>") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。</p> + +<p>すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。</p> + +<p>例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:</p> + +<p><img alt="font-size.png" class="default internal" src="/@api/deki/files/6076/=font-size.png" style="border: 1px solid black;"></p> + +<p>フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。</p> + +<p>{{ 英語版章題("New features in Firefox 13") }}</p> + +<p>ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態で<a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a>が開きます。</p> + +<p>宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。</p> + +<p>編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:</p> + +<p><img alt="style-panel-warning-icon.png" class="default internal" src="/@api/deki/files/6223/=style-panel-warning-icon.png"></p> + +<p>{{ 英語版章題("The Properties view") }}</p> + +<h2 id="プロパティビュー">プロパティビュー</h2> + +<p>一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。</p> + +<p><img alt="style-properties.png" class="internal rwrap" src="/@api/deki/files/6077/=style-properties.png" style="float: right;">既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。</p> + +<p>検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。</p> + +<p>プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。</p> + +<p>{{ 英語版章題("Learning more about properties") }}</p> + +<h3 id="プロパティについて詳しく学ぶ">プロパティについて詳しく学ぶ</h3> + +<p><img alt="showing-info-icon.png" class="internal lwrap" src="/@api/deki/files/6079/=showing-info-icon.png" style="float: left;">よく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。</p> + +<p>{{ 英語版章題("See also") }}</p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> + <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/ja/Tools" title="Tools">Tools</a></li> +</ul> + +<p>{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}</p> diff --git a/files/ja/conflicting/tools/page_inspector/ui_tour/index.html b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..e872753d82 --- /dev/null +++ b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,36 @@ +--- +title: HTML panel +slug: conflicting/Tools/Page_Inspector/UI_Tour +translation_of: Tools/Page_Inspector/UI_Tour +translation_of_original: Tools/Page_Inspector/HTML_panel +original_slug: Tools/Page_Inspector/HTML_panel +--- +<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10.0") }}</p> + +<p>ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。</p> + +<div class="note"><strong>注意:</strong> HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。</div> + +<h2 id="HTML_のナビゲートを行う">HTML のナビゲートを行う</h2> + +<p>HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。</p> + +<p><img alt="html-panel.png" class="default internal" src="/@api/deki/files/6073/=html-panel.png"></p> + +<p>HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。</p> + +<h2 id="属性の実験を行う">属性の実験を行う</h2> + +<p>ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:</p> + +<p><img alt="edit-html-attr.png" class="default internal" src="/@api/deki/files/6080/=edit-html-attr.png"></p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/ja/Tools/Page_Inspector/Style_panel" title="ja/Tools/Page_Inspector/Style panel">Style panel</a></li> + <li><a href="/ja/Tools" title="Tools">Tools</a></li> +</ul> + +<p>{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}</p> diff --git a/files/ja/conflicting/tools/performance/call_tree/index.html b/files/ja/conflicting/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..1f857f4b74 --- /dev/null +++ b/files/ja/conflicting/tools/performance/call_tree/index.html @@ -0,0 +1,115 @@ +--- +title: プロファイラのチュートリアル +slug: conflicting/Tools/Performance/Call_Tree +translation_of: Tools/Performance/Call_Tree +translation_of_original: Tools/Performance/Profiler_walkthrough +original_slug: Tools/Performance/Profiler_walkthrough +--- +<div>{{ToolsSidebar}}</div><p>JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p> + +<h2 id="Analysing_profiles" name="Analysing_profiles">プロファイルを分析する</h2> + +<p>パフォーマンスツールがどのようにプロファイルを提供するかを理解するには、例を見ていくことがもっとも簡単です。以下のコードは 2 から 10,000 までの数値について素数であるかを確認して、その結果を表示します。少しおもしろくするため、素数の確認は <code><a href="/ja/docs/Web/API/WindowTimers.setTimeout">setTimeout</a></code> のコールバックとして実行します:</p> + +<pre class="brush: js">function isPrime(i) { + for (var c = 2; c <= Math.sqrt(i); ++c) { + if (i % c === 0) { + console.log(i + " is not prime"); + return; + } + } + console.log(i + " is prime"); +} + +function timedIsPrime(i) { + setTimeout(function() { + isPrime(i); + }, 100); +} + +function testPrimes() { + var n = 10000; + for (var i = 2; i != n; ++i) { + timedIsPrime(i); + } +} + +var testPrimesButton = document.getElementById("test-primes"); +testPrimesButton.addEventListener("click", testPrimes, false);</pre> + +<p>このコードを Web ページに貼り付けて実行すると、コンソールへ以下のように出力します:</p> + +<pre>"2 is prime" +"3 is prime" +"4 is not prime" +"5 is prime" +"6 is not prime"</pre> + +<p>このコードのプロファイルを取得すると、以下のように表示されるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>最初の行は、<em>関数</em>列が常に <em>(ルート)</em> になります。ここでは 2 つのことを示しています: プロファイリングに 1,121.95 ミリ秒かかっており、またその間に 78 個のサンプルを取得しました。<em>(ルート)</em> の下に、サンプルの取得中にプログラムで経由した、さまざまなパスのツリーを表示します。<em>(ルート)</em> の直下に、スタックの底にあるトップレベルの関数が現れます。この例では、トップレベルの関数が 2 つあります:</p> + +<ul> + <li>click イベントのリスナである <code>testPrimes()</code></li> + <li><code>timedIsPrime()</code> 内の <code>setTimeout()</code> の引数で指定した、無名のコールバック関数</li> +</ul> + +<p><code>testPrimes()</code> の行を見ていきましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9515/primality-profile-testprimes.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>ここでは、78 個のサンプルのうち 29 個を <code>testPrimes()</code> 内で取得したことがわかります。<em>合計コスト</em>の列は、サンプル数をパーセント値に置き換えたものです: <code>(29/78) * 100</code> =<code> 37.17</code></p> + +<p>ところが<em>時間</em>と<em>コスト</em>は、ともに 0 です。これは、そのスタックフレームのコードを実行している間に取得したサンプルがないためです。サンプルはすべて、関数内にネストしているブロックまたは <code>testPrimes()</code> が呼び出した関数の内部で取得したものです。これは次の行でわかります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9517/primality-profile-testprimes-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>この行も <em>testPrimes</em> という名称です。これは 19 行目から始まる <code>for</code> ループが作成した、<code>testPrimes()</code> の新たなスタックフレームを指しています。前のフレームの<em>コスト</em>が 0 であったことから予想されるとおり、このフレームの<em>サンプル</em>列も 29 です。</p> + +<p>しかし、<em>コスト</em>と<em>時間</em>は 0 ではありません。これはいくつかのサンプルが、このフレームを実行しているときに取得されたことを表します。プロファイルではサンプルをいくつ取得したかを明示していませんが、次の <em>timedIsPrime</em> という名前の行で取得したサンプルが 24 個であることから、5 個取得したはずです。これは簡単に確認できます。<code>(5/78) * 100 = 6.41</code> であり、<em>コスト</em>の値と一致します。</p> + +<p>この分岐で残る 24 個のサンプル (全体の 30.76%) は <code>timedIsPrime()</code> で取得されました。つまり、<code>setTimeout()</code> (12 行目) を呼び出している部分です。</p> + +<p>コールツリーの別の分岐は、<code>setTimeout()</code> (13 行目) に渡した無名のコールバック関数から始まっています。ここではサンプルを 1 個取得しており、残り 48 個のサンプル (全体の 61.53%) はコールバックで呼び出す <code>isPrime()</code> で取得されました。</p> + +<p>総括すると、もっとも多くのサンプルを <code>isPrime()</code> で取得しており (全体の 61.53%)、その次が <code>timedIsPrime()</code> (全体の 30.76%)、残りは取るに足らない量です。統計的に言えば、おそらくこれらの関数がほとんどの時間を消費していますので、プログラムを高速化したい場合の有力な最適化候補になります。</p> + +<h3 id="Total_Time_and_Self_Time" name="Total_Time_and_Self_Time"><em>合計時間</em>と<em>時間</em></h3> + +<p><em>合計時間</em>と<em>時間</em>の列は<em>合計コスト</em>と<em>コスト</em>から算出していますが、直接反映したものではありません。規則的にサンプルを取得しようとしていますが、そのとおりに取得できない場合もあります。適切な時期にサンプルを取得できなかった場合は、その不規則性を補正しようとします。</p> + +<h3 id="Inverting_the_call_tree" name="Inverting_the_call_tree">呼び出しツリーを反転</h3> + +<p>既定では、プロファイラは一般的なコールスタックと同様に、呼び出しツリーを根から葉の順に表示します。つまりそれぞれのトップレベル関数、トップレベル関数が呼び出す関数、その関数から呼び出される関数、といった順になります:</p> + +<pre>testPrimes + + -> timedIsPrime + + + +(setTimeout callback) + + -> isPrime</pre> + +<p>これは論理的かつスタックが積み上げられる時系列に従っており、コールスタックを表現するための慣習的な方法でもあります。一方、時間がかかっている場所が呼び出しツリーの深部にあることがよくあります。前出の例でわかるとおり、全サンプルの 90% は 2 つの主要な分岐の終端で発生しています。</p> + +<p>多くのサンプルを記録したスタックフレームに注目させるため、呼び出しツリーを反転させるオプションがプロファイラにあります。このオプションを選択すると、プロファイラは以下のようになります:</p> + +<ul> + <li><em>コスト</em>が 0 より大きいスタックフレーム、つまり、サンプルを取得したとき実際に実行していたスタックフレームのリストを作成します。</li> + <li>リストは、スタックフレームで取得したサンプル数の順に並べ替えられます。</li> + <li>リスト内の各項目で、コールスタックをトップレベル関数に向かって逆向きに表示します。</li> +</ul> + +<p>例えば testPrimes の例を、既定の表示でもう一度示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>呼び出しツリーを反転すると以下のようになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9521/primality-profile-inverted.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>反転した表示では、プログラムで時間がかかっている場所を効果的に目立たせていることがわかるでしょう。</p> diff --git a/files/ja/conflicting/tools/performance/index.html b/files/ja/conflicting/tools/performance/index.html new file mode 100644 index 0000000000..b4c45173f3 --- /dev/null +++ b/files/ja/conflicting/tools/performance/index.html @@ -0,0 +1,146 @@ +--- +title: JavaScript プロファイラ +slug: conflicting/Tools/Performance +tags: + - Debugging + - Firefox + - Guide + - Profiler + - Profiling + - Tools +translation_of: Tools/Performance +translation_of_original: Tools/Profiler +original_slug: Tools/Profiler +--- +<div>{{ToolsSidebar}}</div><p>プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。</p> + +<p>"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。</p> + +<p><a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a>が開いて、プロファイラが選択されます。</p> + +<h2 id="Sampling_profilers" name="Sampling_profilers"><a name="sampling-profilers">サンプリング型プロファイラ</a></h2> + +<p>JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。<br> + <br> + <a name="profiling-example">例えば、以下のようなプログラムについて考えてみましょう:</a></p> + +<pre class="brush: js">function doSomething() { + var x = getTheValue(); + x = x + 1; // -> サンプル A + logTheValue(x); +} + +function getTheValue() { + return 5; +} + +function logTheValue(x) { + console.log(x); // -> サンプル B、サンプル C +} + +doSomething();</pre> + +<p>プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。</p> + +<p>これらはすべて <code>doSomething()</code> の内部から取得されますが、2 番目の 2 つは <code>doSomething()</code> から呼び出された <code>logTheValue()</code> 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:</p> + +<pre>サンプル A: doSomething() +サンプル B: doSomething() > logTheValue() +サンプル C: doSomething() > logTheValue()</pre> + +<p>これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、<code>logTheValue()</code> がコード内のボトルネックであると断定できるかもしれません。</p> + +<h2 id="Creating_a_profile" name="Creating_a_profile">プロファイルの作成</h2> + +<p>プロファイラで<em>ストップウォッチ</em>のボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> + +<p>"終了" をクリックすると、新しいプロファイルが自動的に開きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>このペインは 2 つのパーツに分かれています:</p> + +<ul> + <li>左側は取得したすべてのプロファイルを一覧表示しており、それぞれのプロファイルを読み込むことができます。また、リストの上にボタンが 2 つあります。<em>ストップウォッチ</em>のボタンは新たなプロファイルの記録を、<em>インポート...</em> ボタンは以前に保存したデータのインポートを行います。プロファイルを選択しているときは、<em>保存</em>ボタンをクリックするとデータを JSON ファイルとして保存できます。</li> + <li>右側は現在読み込んでいるプロファイルを表示します。</li> +</ul> + +<h2 id="Analyzing_a_profile" name="Analyzing_a_profile">プロファイルの分析</h2> + +<p>プロファイルは 2 つのパーツに分かれています:</p> + +<ul> + <li><a href="#profile-timeline" title="#profile-timeline">プロファイルのタイムライン</a></li> + <li><a href="#profile-details" title="#profile-details">プロファイルの詳細</a></li> +</ul> + +<h3 id="Profile_timeline" name="Profile_timeline"><a name="profile-timeline">プロファイルのタイムライン</a></h3> + +<p>プロファイルのタイムラインは、プロファイル表示の上部を占めています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。</p> + +<p>チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、<a href="/ja/docs/Web/API/window.requestAnimationFrame" title="Web/API/window.requestAnimationFrame">requestAnimationFrame</a> や <a href="/ja/docs/Web/Guide/Performance/Using_web_workers" title="Web/Guide/Performance/Using_web_workers">Worker</a> の使用について調べたりしましょう。</p> + +<p>タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Profile_details" name="Profile_details"><a name="profile-details">プロファイルの詳細</a></h3> + +<p>プロファイルの詳細は、プロファイル表示の下部を占めています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> + +<p><strong>実行時間</strong>は当該関数が現れたサンプルの総数を示し<a href="#footnote-1"><sup>1</sup></a>、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、<code>detectImage()</code> 関数内にいたことを表します。</p> + +<p><strong>滞在</strong> は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、<code>doSomething()</code> は<strong>実行時間</strong>が 3 (サンプル A、B、C) ですが、<strong>滞在</strong>の値は 1 (サンプル A) になるでしょう。</p> + +<p>3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。</p> + +<h3 id="Expanding_the_call_tree" name="Expanding_the_call_tree">コールツリーの展開</h3> + +<p>ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、<strong>実行時間</strong>がその行の<strong>滞在</strong>より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。</p> + +<p>前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、完全に展開したコールツリーは以下のようになります:</p> + +<table class="standard-table" style="height: 100px; width: 378px;"> + <tbody> + <tr> + <td style="text-align: center;"><strong>実行時間</strong></td> + <td style="text-align: center;"><strong>滞在</strong></td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">3 100%</td> + <td style="text-align: center;">1</td> + <td style="text-align: center;">doSomething()</td> + </tr> + <tr> + <td style="text-align: center;">2 67%</td> + <td style="text-align: center;">2</td> + <td style="text-align: center;">logTheValue()</td> + </tr> + </tbody> +</table> + +<p>より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると <code>detectImage()</code> 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては <code>detectImage()</code> から呼び出された関数でかかっています (<strong>滞在</strong> セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>これは、<code>detectAtScale()</code> を実際に実行しているときに 6 サンプル、<code>getRect()</code> の実行に 12 サンプルかかっていたことなどを表します。</p> + +<h2 id="Footnotes" name="Footnotes">脚注</h2> + +<ol> + <li><a name="footnote-1">関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、<code>forEach</code> など汎用的な関数はコールツリー内に複数回現れるでしょう。</a></li> +</ol> diff --git a/files/ja/conflicting/tools/responsive_design_mode/index.html b/files/ja/conflicting/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..35f4517454 --- /dev/null +++ b/files/ja/conflicting/tools/responsive_design_mode/index.html @@ -0,0 +1,72 @@ +--- +title: レスポンシブデザインモード (Firefox 52 より前) +slug: conflicting/Tools/Responsive_Design_Mode +translation_of: Tools/Responsive_Design_Mode +translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) +original_slug: Tools/Responsive_Design_Mode_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> をご覧ください。</p> +</div> + +<p><a href="/ja/docs/Web_Development/Responsive_Web_design">レスポンシブデザイン</a> は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。</p> + +<p>以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p> + +<p>レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。</p> + +<p>もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。</p> + +<p>レスポンシブデザインモードを有効にした状態で、コンテンツエリアがリサイズされたまま通常どおりにブラウジングを続けることができます。</p> + +<h2 id="Enabling_and_disabling" name="Enabling_and_disabling">有効化と無効化</h2> + +<p>レスポンシブデザインモードの有効化方法は 3 つあります:</p> + +<ul> + <li>Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) のウェブ開発サブメニューで [レスポンシブデザインモード] を選択する</li> + <li><a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> で [レスポンシブデザインモード] ボタンを押す</li> + <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)</li> +</ul> + +<p>また、レスポンシブデザインモードを無効化する方法も 3 つあります:</p> + +<ul> + <li>[レスポンシブデザインモード] メニュー項目を再度選択する</li> + <li>ウィンドウの左上隅にある [終了] ボタンをクリックする</li> + <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)。Firefox 34 より前では、Esc キーでもレスポンシブデザインモードが閉じました。</li> +</ul> + +<h2 id="Resizing" name="Resizing">リサイズ</h2> + +<p>コンテンツエリアのサイズを変更する方法は 2 つあります:</p> + +<ul> + <li><a href="#select-size">[サイズ選択] コントロール</a> を使用する</li> + <li>コンテンツエリアの右端と下端、および右下隅にあるコントロールをクリックアンドドラッグする</li> +</ul> + +<p>クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。</p> + +<h2 id="Responsive_Design_Mode_controls" name="Responsive_Design_Mode_controls">レスポンシブデザインモードの操作</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:</p> + +<dl> + <dt>終了</dt> + <dd>レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。</dd> + <dt>サイズ選択</dt> + <dd>いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。</dd> + <dt>高さと幅を入れ替え</dt> + <dd>スクリーンの向きのポートレートとランドスケープを切り替えます。</dd> + <dt>タッチイベントをシミュレート</dt> + <dd>touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">touch イベント</a> に変換します。</dd> + <dt>スクリーンショット</dt> + <dd>コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。</dd> + <dt>Custom User Agent を設定</dt> + <dd><em>Firefox 47 の新機能</em>。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、<a href="/ja/docs/Browser_detection_using_the_user_agent">UA スニッフィング</a> によってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。</dd> +</dl> |