通过 JavaScript XHR 源跟踪，您可以在浏览器中为不同的堆栈跟踪拆分 servlet 调用， 从而更好地将被分析的 JVM 中的活动与浏览器中的操作相关联。 在以下内容中，“XHR”指代 XMLHttpRequest 和 Fetch 机制。

浏览器插件

要使用此功能，您必须使用 Google Chrome 作为浏览器并安装 JProfiler origin tracker 扩展。

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

当跟踪被激活时，JProfiler 扩展将要求您重新加载页面。这是为了添加检测。如果您选择不重新加载页面，事件检测可能无法正常工作。

跟踪状态在每个域名基础上是持久的。如果您在跟踪活动时重新启动浏览器并访问相同的 URL，跟踪将自动启用，无需重新加载页面。

JavaScript XHR 树

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

Javascript  调用栈节点包括源文件和行号的信息。 进行 XHR 调用的函数有一个  特殊图标和相邻的超链接， 如果 XHR 调用由被分析的 JVM 处理。超链接将带您到 Javascript 拆分节点在 调用树视图，您可以在其中查看负责处理此类请求的服务器端调用树。

在树的顶部，您会发现  浏览器事件 节点，显示事件名称和元素名称以及有助于您确定事件来源的重要属性。并非所有请求都有相关事件。

扩展了解几个流行的 JavaScript 框架，并在事件的目标节点和事件监听器所在的节点之间遍历祖先层次结构， 寻找适合显示和拆分调用树的属性。如果找不到特定于框架的属性，它会在 id 属性处停止。如果没有 ID，它会搜索“控制元素”，如 a、 button 或 input。如果都失败，将显示注册事件监听器的元素。

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

data-jprofiler="..."

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

调用树拆分

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

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