トレース実行タブ
このタブは、ツールバーと 3 つのペイン（イベントペイン、 イベントスタックペイン、 クイック評価ウィンドウ ）で構成されています。
イベントツールバー
ツールバーのボタンを使用して、キャプチャーするイベントの範囲を制御し、プレゼンテーションを構成し、キャプチャーされたイベントのリストを移動します。
項目 | ツールチップとショートカット | 説明 |
|---|---|---|
| すべて展開 Ctrl+NumPad + | このボタンをクリックすると、リスト内のすべてのノードが展開されます。 |
| すべて折りたたむ Ctrl+NumPad - | このボタンをクリックすると、リスト内のすべてのノードが折りたたまれます。 |
| スタックトレースの上へ | このボタンをクリックすると、スタックトレース内の前のトレースページに移動します。 |
| スタックトレースの下へ | このボタンをクリックすると、スタックトレース内の次のトレースページに移動します。 |
| シングルクリックで移動 | このトグルボタンを押すと、 イベント ペインのリストが エディター と自動的に同期します。
|
| キャプチャーイベント | このボタンをクリックすると、キャプチャーされ、 イベント リストに表示されるイベントの範囲を設定します。 デフォルトでは、実行構成で URL アドレスを明示的に指定しない限り、Spy-js は開いているすべての Web ページ上のすべてのイベントをキャプチャーします（https セキュア Web サイトを除く）。 キャプチャーされたすべてのイベントは、 Spy-js ツールウィンドウの イベント ペインに表示されます。 ユーザー定義のイベントフィルターを適用することで、特定の種類のイベントのキャプチャーを抑制できます。 カスタムイベントフィルターを定義するには:
フィルターを有効にするには、リストで必要なフィルターの横にあるチェックボックスをオンにします。 |
| このボタンをクリックして、トレースからすべてまたは一部のイベントを削除し、対応するトレースファイルをエディターで閉じます。 表示されるリストから次のオプションのいずれかを選択します。
| |
をクリックしたときにエディター内のすべてのトレースファイルを閉じます。
に切り替わり、その後クリックするとアプリケーションが強制終了されます。例えば、Unix では イベントペイン
このペインには、キャプチャーされたイベントのツリーが表示されます。 最上位ノードは、トレースに関与する Web ページである ドキュメントを表します。 ドキュメントにマウスオーバーすると、PhpStorm は ドキュメントの URL アドレス、開いているブラウザー、そのブラウザーが実行されているオペレーティングシステムを表示するツールチップを表示します。 ドキュメントノードには、開いているブラウザーを示すアイコンも提供されます。
各 文書ノードに、ページで検出されたイベントとそこから開始されたスクリプトがリストされます。 同じ種類のイベントはビジュアルコンテナーにまとめられます。 コンテナーのヘッダーには、その中にグループ化されているイベントの名前、コンテナー内のすべてのイベントの平均実行時間、およびコンテナー内のイベントの数が表示されます。 各ノードを展開して、その中の個々のイベントを調べることができます。
スクリプトファイル名には、 イベントスタック ペインで作業するときに区別するのに役立つさまざまなカラーインジケーターがあります。 スクリプトファイル名の上にマウスを置くと、完全なスクリプト URL が表示されます。
イベントがクリックされると、その呼び出しスタックが イベントスタック ペインに表示されます。 スタックは、関数呼び出しのツリーで表されます。
ドキュメントノードのコンテキストメニュー
メニュー項目 | 説明 |
|---|---|
削除 | 選択したページ上のすべてのスクリプトのトレースをキャンセルし、 イベント ペインからその下のすべての項目を含む選択したノードを削除するには、このオプションを選択します。 現在開いているトレースファイルはすべてエディターで開いたままです。 |
すべての子を除去 | 選択したページにあるアイテムを削除しますが、ページの新しいイベントが引き続き受信されるように追跡します。 ドキュメントノード自体は イベント ペインに残り、現在開いているトレースファイルはすべてエディターで開いたままです。 |
トレースファイルの除去とクローズ | 選択したページのすべてのスクリプトのトレースを取り消し、選択したノードおよびその下のすべての項目を イベント ペインから削除し、エディターで対応するトレースファイルを閉じるには、このオプションを選択します。 |
トレースファイルを閉じる | 選択したドキュメントノードおよびその下のアイテムに対応する、現在開いているすべてのトレースファイルを閉じるには、このオプションを選択します。 ドキュメントノードとその下の項目は、 イベント ペインに残ります。 |
ブラウザーでページをリフレッシュする | 選択した文書ノードに対応するページを再ロードするには、このオプションを選択してください。 選択したノードのトレースは中止され、同じページをトレースするための新しいドキュメントノードが作成され、古いノードは 非アクティブになります。 |
ブラウザーでページクローズを試行する | 選択したノードに対応するページを閉じるには、このオプションを選択してください。 選択したノードのトレースは中止され、ノードは 非アクティブになります。 |
アプリケーションの依存関係ダイアグラムを表示する | アプリケーション全体の依存関係を含むダイアグラムを作成するには、このオプションを選択します。
|
イベントまたはスクリプトのコンテキストメニュー
メニュー項目 | 説明 |
|---|---|
イベントのミュート | オンザフライで除外フィルターにイベントを追加するには、このオプションを選択します。 |
ミュートスクリプト | オンザフライで除外フィルターにスクリプトを追加するには、このオプションを選択します。 |
削除 | 選択したイベントまたはスクリプトのトレースを取り消したり、選択した項目を イベント ペインから削除したり、対応するトレースファイルをエディターで開いたままにするには、このオプションを選択します。 |
ラベルの追加 | タイムスタンプラベルを設定するには、このオプションを選択します。 タイムスタンプのラベルは、特定の期間内にコードの実行を分析できます。 例: 2 つのタイムスタンプラベルを設定し、それらの間でどのイベントがキャプチャーされたかを確認できます。 または、逆に、特定の期間内にキャプチャーされなかったイベントを特定し、パフォーマンスの問題を検出することができます。 |
イベント依存関係ダイアグラムを表示する | このオプションを選択すると、イベント選択イベントがインボリュートされている依存関係を含むダイアグラムが作成されます。
|
キャプチャーするイベントの範囲を構成する
デフォルトでは、実行構成で URL アドレスを明示的に指定しない限り、Spy-js は開いているすべての Web ページ上のすべてのイベントをキャプチャーします（https セキュア Web サイトを除く）。 キャプチャーされたすべてのイベントは、 Spy-js ツールウィンドウの イベント ペインに表示されます。 ユーザー定義のイベントフィルターを適用することで、特定の種類のイベントのキャプチャーを抑制できます。
新しいカスタムフィルターを定義したり、その場で既存のフィルターにイベントパターンを追加することができます。
利用可能な設定済みフィルターを表示するには
ツールバーの キャプチャーイベント ボタン
をクリックします。 現在適用されているフィルターに目盛りが付けられます。 既定では、 すべてをキャプチャー の事前定義フィルターが適用されます。
アプリケーションを停止せずにイベントのキャプチャーを停止するには
ツールバーの キャプチャーイベント ボタン
をクリックし、コンテキストメニューから すべてミュート を選択します。 アプリケーションはまだ実行されていますが、 イベント ペインに最後に取得したイベントが表示されます。 これは、スクリプトを解析して イベント ペインに表示する必要があるが、新しいイベントがキャプチャーされるときに削除されないようにする場合に役立ちます。
新しいイベントフィルターを定義するには
ツールバーの キャプチャーイベント ボタン
をクリックし、リストから キャプチャー除外の編集 を選択します。開いた Spy-js 除外ルールダイアログで、左側のペインで 追加
をクリックします。右側のペインで、 除外名 フィールドにフィルター名を指定し、除外ルールのリストを構成します。
ルールを追加するには、
をクリックすると、 除外条件を追加 ダイアログが開きます。 値 / パターン フィールドにパターンを入力し、 条件タイプ リストで、パターンをイベントタイプまたはスクリプト名のどちらに適用するかを指定します。 グロブパターンマッチング(英語)が使用されることに注意してください。 OK をクリックすると、PhpStorm は Spy-js キャプチャーの除外ダイアログ へ移動します。ルールを編集するには、リストでルールを選択し、
をクリックして、開いたダイアログでルールを更新します。 ルールを削除するには、リストで選択して 
をクリックします。
適用するフィルターを選択するには
- をクリックし、リストで必要なフィルターの横にあるチェックボックスを選択します。 フィルターが設定されていないか、使用可能なフィルターがどれもタスクに適合しない場合は、前述のように新しいフィルターを作成します。
イベント ペインですでにキャプチャーされたイベントのツリーを移動している間は、トレースしたくないイベントやスクリプトを見つけることができます。 上記のようにフィルターを作成できますが、この場合はペインを離れる必要があります。 PhpStorm を使えば、 イベント ペイン上でイベントやスクリプトを検出したらすぐに、それに基づいた除外ルールを作成できます。
オンザフライで除外ルールを作成するには
除外するイベントを選択し、 <イベント名> イベントのミュート または <スクリプト名> ファイルのミュート を選択します。 ユーザー定義フィルターが適用されている場合、新しいルールは自動的に追加されます。 すべてをキャプチャー がアクティブな場合は Spy-js 除外ルールダイアログが開き、選択したイベントやスクリプトを元に新しいフィルターを作成したり、既存のフィルターを選択して新しいルールを追加できます。
イベントスタックペイン
イベント ペインのイベントをクリックすると、そのコールスタックが イベントスタック ペインに表示されます。 スタックは、関数呼び出しのツリーで表されます。 各ツリーノードは、呼び出された関数を表します。 ノードテキストには、合計実行時間、スクリプトファイル名、関数名が含まれます。 ノードをクリックすると、 クイック評価 ペインに追加の関数呼び出しの詳細、パラメーター値、戻り値、関数実行中に発生した例外の詳細が表示されます。
ペインはエディターと同期されているため、スタックツリーの項目から対応する トレースファイルまたは ソースファイルに移動できます。
トレースファイルは、書き込み禁止のスクリプトで、 <script name>.js.trace という名前が付けられています。 スタックツリー内の項目をダブルクリックするか、項目を選択してコンテキストメニューから トレースにジャンプ を選択すると、クリックした関数にキャレットが置かれた状態で対応する トレースファイルがエディターで開きます。 別の方法は、 自動スクロールしてトレース トグルボタンを押して、さまざまなスタックノードを選択することです。 この場合、 イベント ペインでイベントまたはスクリプトをクリックすると、トレースファイルが開きます。
関数に移動するだけでなく、呼び出し元のコード内の場所にも移動できます。 これを行うには、必要な項目を選択し、コンテキストメニューから 呼び出し元にジャンプ を選択します。
ファイルの内容がハイライトされ、選択したスタックノードのコード実行パスが表示されます。
ECMASript6、 CoffeeScript、 TypeScript コードを使用してアプリケーションをトレースしている場合、 Spy-js は マップされたトレースファイルも生成します。 これらは、拡張子が .ts.trace 、 .coffee.trace 、または .js.trace の EcmaScript 6、 TypeScript、 CoffeeScript トレースファイルです。 これらのファイル内のコードの断片は、実際に実行されたかのようにハイライトされます。
また、 イベントスタック ペインで項目を選択し、その選択のコンテキストメニューから ソースに移動 を選択することで、整形せずそのまま表示されている ソースファイルにも移動できます。 トレース対象のサイトが PhpStorm プロジェクトにマッピングされている場合、PhpStorm はマッピング情報をもとに対応するローカルファイルを検出し、エディターで開きます。 PhpStorm プロジェクトにマップされていないサイトをトレースしている場合、PhpStorm は読み取り専用の ページソースを、ブラウザーで ページソースを表示する を選択した時のように開きます。
トレース対象のサイトが PhpStorm プロジェクトとマッピングされているとき、PhpStorm は開いている トレースファイルを編集しようとすると ソースファイルを開きます。
スクリプトまたは関数のコンテキストメニュー
項目 | 説明 |
|---|---|
呼び出し元にジャンプ | 現在選択されている項目が呼び出された場所から トレースファイル内のフラグメントに移動するには、このオプションを選択します。 ECMASript6、 CoffeeScript、 TypeScript コードでアプリケーションをトレースしている場合、PhpStorm は トレース JavaScript ファイルまたは マップされたトレースファイル（TypeScript、CoffeeScript、または ECMAScript6）を開きます：
|
トレースにジャンプ | トレースファイルで現在選択されている項目の定義に移動するには、このオプションを選択します。 |
ソースに移動 | このオプションを選択して、 ソースファイルで現在選択されている項目の定義に移動します。 |
このファイルをミュート | このオプションを選択すると、選択したスクリプトをその場で除外フィルターに追加できます。詳細は キャプチャ対象イベント範囲の設定を参照してください。 |
このファイルのみをキャプチャーする | |
この関数呼び出しをすべてのイベントで検索する | このオプションを選択すると、 高度なトレース検索に従って、トレース全体の中の関数呼び出し（すべてのトレースされたイベント間）を移動できます。 |
移動先 | この項目の下にあるオプションを使うと、呼び出しに基づいてスタック全体を移動したり、呼び出されていない関数、つまり実行されていないコード箇所を特定し、その理由を分析したりできます。 利用可能なアクション：トレースファイル内で、次または前の関数の次／現在／前回の呼び出しへ移動します。 アクションの一覧は イベントスタック ペインのコンテキストメニューから利用できます。 選択した関数の次および前の呼び出し、前の関数の前回の呼び出し、次の関数の次回呼び出しへの移動も、 イベントスタック ペインのナビゲーションツールバーから可能です。  これらのアクションのいずれかを選択すると、キャレットはスタック内の呼び出しに移動します。 自動スクロールしてトレース トグルボタンを押すと、対応するトレースファイルが自動的に開き、コールにキャレットが置かれます。 |
ペインとエディター間の同期
イベントスタック ペインは、 イベント ペインおよびエディターと同期します。
スクリプトまたはイベントの呼び出しスタックを表示するには
イベント ペインでイベントまたはスクリプトをクリックします。 呼び出しスタックは イベントスタック ペインに表示されます。
必要に応じて、対応するトレースファイルをエディターで自動的に開くには、ツールバーの 自動スクロールしてトレース トグルボタンを押します。
エディターでイベントまたはスクリプトのトレースファイルを開くには
トレースファイルは、書き込み禁止のスクリプトで、 <script name>.js.trace という名前が付けられています。
イベントスタック ペインで、スクリプトまたはイベントを 2 回クリックするか、コンテキストメニューで トレースにジャンプ を選択します。
自動ナビゲーションを有効にする （自動スクロールしてトレース をクリック）をクリックし、 イベント ペインで必要なイベントまたはスクリプトをクリックします。
イベントペインをエディターと直接同期させるには
ツールバーの 自動スクロールしてトレース トグルボタンを押します。
その後、 イベント ペインのノードをクリックすると、PhpStorm はそのコールスタックを イベントスタック ペインに表示し、エディターで対応するトレースファイルを開きます。 また、 イベントスタック でスクロールすると、PhpStorm はエディターで対応ファイルを自動的に開き、呼び出された関数をハイライト表示します。
クイック評価ペイン
イベントスタック ペインでノードをクリックすると、 クイック評価 ペインに、関数の実行中に例外が発生した場合に、追加の関数呼び出しの詳細、パラメーター値、戻り値が表示されます。
コンテキストメニュー offFunction 呼び出しの詳細
コンテキストメニューは、ペインに表示されているすべての項目から使用できます。
項目 | 説明 |
|---|---|
インスペクション | インスペクション ダイアログを開くには、このオプションを選択します。 |
値をコピー | 選択したノードの値をクリップボードにコピーするには、このオプションを選択します。 |
クリップボードと値を比較 | このオプションを選択すると、 ファイルの差分ビューアー が開き、選択したノードの値とクリップボードの値を比較できます。 |
名前をコピー | 選択したノードの名前をクリップボードにコピーするには、このオプションを選択します。 |