通过JavaScript XHR Origin跟踪，你可以在XMLHttpRequest 或Fetch请求期间，为浏览器中不同的堆栈跟踪拆分servlet调用， 因此你可以更好地将分析JVM中的活动与浏览器中的操作相关联。"XHR"在下文中同时指定XMLHttpRequest和Fetch机制。

浏览器插件

要使用此功能，你必须使用Google Chrome作为浏览器， 并安装JProfiler Origin跟踪器扩展。

Chrome扩展在工具栏上添加了一个带有 JProfiler图标 的按钮，用于开始跟踪。当你开始跟踪时，该扩展将拦截所有XHR调用，并将其报告给本地运行的JProfiler实例。 只要尚未启动跟踪，JProfiler就会显示一个信息页面，告诉你如何设置JavaScript XHR Origin跟踪。

当跟踪被激活时，JProfiler扩展会要求你重新加载页面。这对于添加instrumentation是必要的。 如果你选择不重新加载页面，事件检测可能无法工作。

基于每个域的跟踪状态是持久的。如果你在跟踪激活状态下重新启动浏览器并访问同一URL，跟踪状态将自动启用， 而无需重新加载页面。

JavaScript XHR树

如果XHR调用由JProfiler中的活动分析会话分析的JVM处理，JavaScript XHR视图将显示这些调用的累积调用树。 如果视图仍然是空的，你可以将视图顶部的"范围"切换到"所有XHR调用"，以检查是否有任何XHR调用。

Javascript 调用堆栈节点包括源代码文件和行号信息。 如果XHR调用被被分析JVM处理，产生该XHR调用的函数有一个 特殊图标和相邻超链接。 该超链接将带你到调用树视图中的Javascript拆分节点， 在那里你可以看到负责处理这种类型请求的服务器端调用树。

在树的顶部，你可以查找 浏览器事件节点， 这些节点显示了事件名称和元素名称以及重要的属性，帮助你确定事件的来源。并非所有的请求都有相关的事件。

该扩展知道几个流行的JavaScript框架，并在事件的目标节点到事件监听器所在的节点之间遍历祖先层次结构， 寻找适合显示的属性，并拆分调用树。如果找不到框架特有的属性，它就会停留在一个id 属性上。 在没有ID的情况下，它会搜索"控制元素"，如a ，button 或input 。 所有失败的情况下，将显示事件监听器注册的元素。

在某些情况下，自动检测感兴趣的属性可能并不合适，你可能更喜欢不同的调用树拆分。 例如，一些框架会自动分配ID，但如果将所有元素与操作的语义描述组合在一起，会更易读。 要实现不同的调用树拆分，请添加HTML属性

data-jprofiler="..."

到目标元素或目标和事件监听器位置之间的元素。该属性中的文本将被用于拆分，其他属性将被忽略。

调用树拆分

在调用树视图中，XHR调用将为每个独立的浏览器事件和调用堆栈组合拆分调用树。  拆分节点显示浏览器事件的信息。 如果没有事件正在进行中，比如对setTimeout() 的调用，最后的几个栈帧会被内联显示。

在这些节点上的"显示更多"超链接会打开与视图→显示节点详情操作打开同样的详细信息对话框。 对于JavaScript拆分节点，细节对话框并不显示节点的文本，而是显示整个浏览器调用堆栈。 如果要检查其他JavaScript拆分节点的调用堆栈，请保持非模态的详情对话框打开，点击这些节点，详情对话框会自动更新其内容。