JavaScript XHRオリジントラッキングを使用すると、XMLHttpRequestまたはFetchリクエスト時のブラウザ内の異なるスタックトレースに応じてサーブレットの呼び出しを分割できるため、プロファイルされたJVMでのアクティビティとブラウザでのアクションをより適切に関連付けることができます。以下では、「XHR」はXMLHttpRequestとFetchの両方のメカニズムを指します。
ブラウザプラグイン
この機能を使用するには、ブラウザとしてGoogle Chromeを使用し、JProfiler origin tracker extensionをインストールする必要があります。
このChrome拡張機能は、トラッキングを開始するための JProfilerアイコン付きのボタンをツールバーに追加します。トラッキングを開始すると、拡張機能はすべてのXHR呼び出しをインターセプトし、ローカルで実行されているJProfilerインスタンスにレポートします。トラッキングが開始されていない間、JProfilerにはJavaScript XHRオリジントラッキングのセットアップ方法を説明する情報ページが表示されます。
トラッキングが有効になると、JProfiler拡張機能からページの再読み込みを求められます。これはインストルメンテーションを追加するために必要です。ページを再読み込みしない場合、イベント検出が機能しない可能性があります。
トラッキングステータスはドメインごとに保持されます。トラッキングがアクティブな状態でブラウザを再起動し、同じURLにアクセスした場合、ページを再読み込みしなくても自動的にトラッキングが有効になります。
JavaScript XHRツリー
XHR呼び出しがJProfilerのアクティブなプロファイリングセッションによってプロファイルされているJVMで処理される場合、JavaScript XHRビューにはこれらの呼び出しの累積呼び出しツリーが表示されます。ビューが空のままの場合は、ビューの上部にある「Scope」を「All XHR calls」に切り替えて、XHR呼び出しが行われたかどうかを確認できます。
JavaScriptの 呼び出しスタックノードには、ソースファイルと行番号に関する情報が含まれます。プロファイルされたJVMによってXHR呼び出しが処理された場合、XHR呼び出しが行われた関数には 特別なアイコンと隣接するハイパーリンクが表示されます。このハイパーリンクをクリックすると、呼び出しツリービュー内のJavaScript分割ノードに移動し、このタイプのリクエストの処理を担当したサーバー側の呼び出しツリーを確認できます。
ツリーの上部には、イベントの発生源を特定するのに役立つ重要な属性とともに、イベント名と要素名を表示する ブラウザイベントノードがあります。すべてのリクエストに関連付けられたイベントがあるわけではありません。
拡張機能はいくつかの一般的なJavaScriptフレームワークを認識しており、イベントのターゲットノードからイベントリスナーが配置されているノードまでの祖先階層をたどって、表示や呼び出しツリーの分割に適した属性を探します。フレームワーク固有の属性が見つからない場合は、id属性で停止します。IDが存在しない場合は、a、button、inputなどの「コントロール要素」を検索します。それらすべてが見つからない場合は、イベントリスナーが登録されている要素が表示されます。
場合によっては、関心のある属性の自動検出が適切でない可能性があり、別の呼び出しツリーの分割が望ましいこともあります。例えば、一部のフレームワークは自動IDを割り当てますが、アクションのセマンティックな説明とともにすべての要素をグループ化する方が読みやすくなります。異なる呼び出しツリーの分割を行うには、HTML属性
data-jprofiler="..."
をターゲット要素、またはターゲットとイベントリスナーの場所の間にある要素に追加します。その属性内のテキストが分割に使用され、その他の属性は無視されます。
呼び出しツリーの分割
呼び出しツリービューでは、XHR呼び出しによって、ブラウザイベントと呼び出しスタックの個別の組み合わせごとに呼び出しツリーが分割されます。
分割ノードには、ブラウザイベントに関する情報が表示されます。setTimeout()の呼び出しのようにイベントが進行中でない場合は、直近のいくつかのスタックフレームがインラインで表示されます。
これらのノードにある「show more」ハイパーリンクをクリックすると、View→Show Node Detailsアクションによって開かれるのと同じ詳細ダイアログが開きます。JavaScript分割ノードの場合、詳細ダイアログにはノードのテキストではなく、ブラウザの呼び出しスタック全体が表示されます。他のJavaScript分割ノードの呼び出しスタックを調査するには、ノンモーダルな詳細ダイアログを開いたままにしてそれらのノードをクリックします。詳細ダイアログの内容が自動的に更新されます。
