JProfiler ヘルプ - JavaScript XHR

JavaScript XHR オリジントラッキングを使用すると、ブラウザ内の異なるスタックトレースに対してサーブレット呼び出しを分割できます。これにより、XMLHttpRequest または Fetch リクエスト中のプロファイルされた JVM のアクティビティをブラウザ内のアクションとより良く関連付けることができます。以下では、「XHR」は XMLHttpRequest と Fetch の両方のメカニズムを指します。

ブラウザプラグイン

この機能を使用するには、ブラウザとして Google Chrome を使用し、 JProfiler オリジントラッカー拡張機能をインストールする必要があります。

Chrome 拡張機能は、ツールバーに JProfiler アイコンのボタンを追加し、トラッキングを開始します。トラッキングを開始すると、拡張機能はすべての XHR 呼び出しをインターセプトし、ローカルで実行中の JProfiler インスタンスに報告します。トラッキングが開始されていない限り、JProfiler は JavaScript XHR オリジントラッキングの設定方法を示す情報ページを表示します。

トラッキングがアクティブ化されると、JProfiler 拡張機能はページのリロードを求めます。これは計装を追加するために必要です。ページをリロードしないことを選択した場合、イベント検出が機能しない可能性があります。

トラッキングのステータスはドメインごとに永続的です。トラッキングがアクティブな状態でブラウザを再起動し、同じ URL を訪れると、ページをリロードすることなくトラッキングが自動的に有効になります。

JavaScript XHR ツリー

XHR 呼び出しが JProfiler のアクティブなプロファイリングセッションによってプロファイルされた JVM によって処理される場合、 JavaScript XHR ビューはこれらの呼び出しの累積された呼び出しツリーを表示します。ビューが空のままの場合は、ビューの上部にある「スコープ」を「すべての XHR 呼び出し」に切り替えて、XHR 呼び出しが行われたかどうかを確認できます。

JavaScript 呼び出しスタックノードには、ソースファイルと行番号に関する情報が含まれています。 XHR 呼び出しが行われた関数には、特別なアイコンと、プロファイルされた JVM によって処理された場合には隣接するハイパーリンクがあります。ハイパーリンクをクリックすると、呼び出しツリービューの JavaScript 分割ノードに移動し、このタイプのリクエストを処理するためにサーバー側で行われた呼び出しツリーを見ることができます。

ツリーの上部には、ブラウザイベントノードがあり、イベント名と要素名を重要な属性と共に表示し、イベントのソースを特定するのに役立ちます。すべてのリクエストに関連するイベントがあるわけではありません。

拡張機能は、いくつかの人気のある JavaScript フレームワークを認識しており、イベントのターゲットノードからイベントリスナーが配置されているノードまで祖先階層をたどり、表示に適した属性を探して呼び出しツリーを分割します。フレームワーク固有の属性が見つからない場合は、 id 属性で停止します。ID がない場合は、a、button、input などの「制御要素」を探します。すべて失敗した場合、イベントリスナーが登録されている要素が表示されます。

場合によっては、興味深い属性の自動検出が適切でないことがあり、異なる呼び出しツリーの分割を好むかもしれません。たとえば、一部のフレームワークは自動的に ID を割り当てますが、アクションの意味的な説明と共にすべての要素をグループ化する方が読みやすい場合があります。異なる呼び出しツリーの分割を実現するには、HTML 属性を追加します。

data-jprofiler="..."

ターゲット要素またはターゲットとイベントリスナーの位置の間の要素に追加します。その属性のテキストが分割に使用され、他の属性は無視されます。

呼び出しツリーの分割

呼び出しツリービューでは、XHR 呼び出しはブラウザイベントと呼び出しスタックの各組み合わせごとに呼び出しツリーを分割します。分割ノードはブラウザイベントに関する情報を表示します。イベントが進行中でない場合、たとえば setTimeout() の呼び出しでは、最後の数フレームがインラインで表示されます。

これらのノードの「詳細を表示」ハイパーリンクをクリックすると、 ビュー→ノードの詳細を表示 アクションによって開かれるのと同じ詳細ダイアログが開きます。 JavaScript 分割ノードの場合、詳細ダイアログにはノードのテキストではなく、ブラウザの呼び出しスタック全体が表示されます。他の JavaScript 分割ノードの呼び出しスタックを調べるには、非モーダルの詳細ダイアログを開いたままにして、それらのノードをクリックします。詳細ダイアログは自動的に内容を更新します。