通过 JavaScript XHR 源跟踪，您可以在浏览器中针对不同调用栈拆分 servlet 调用（在 XMLHttpRequest 或 Fetch 请求期间）， 这样可以更好地将被分析 JVM 的活动与浏览器中的操作进行关联。 下文中，“XHR”指代 XMLHttpRequest 和 Fetch 两种机制。
浏览器插件
要使用此功能，您需要使用 Google Chrome 作为浏览器，并安装 JProfiler origin tracker extension（JProfiler 源跟踪扩展）。
该 Chrome 扩展会在工具栏中添加一个带有 JProfiler 图标的按钮，用于启动跟踪。当您开始跟踪时，扩展会拦截所有 XHR 调用，并将其上报给本地运行的 JProfiler 实例。在未开始跟踪前，JProfiler 会显示一条信息页面，指导您如何设置 JavaScript XHR 源跟踪。
跟踪激活后，JProfiler 扩展会提示您重新加载页面。这是为了添加插桩。如果您选择不重新加载页面，则事件检测可能无法正常工作。
跟踪状态会按域名持久保存。如果在跟踪激活时重启浏览器并访问相同的 URL，跟踪会自动启用，无需重新加载页面。
JavaScript XHR 树
如果 XHR 调用由被分析的 JVM（在 JProfiler 的活动会话中）处理，JavaScript XHR 视图会显示这些调用的累计调用树。 如果视图为空，您可以将视图顶部的“范围”切换为“所有 XHR 调用”，以检查是否有 XHR 调用发生。
JavaScript 调用栈节点包含源文件和行号信息。 发起 XHR 调用的方法会带有 特殊图标和相邻的超链接（如果该 XHR 调用由被分析 JVM 处理）。 点击该超链接可跳转到 调用树视图 中的 Javascript 拆分节点， 查看负责处理此类请求的服务端调用树。
在树的顶部，您会看到 浏览器事件节点， 显示事件名称和元素名称，以及有助于定位事件源的重要属性。并非所有请求都关联有事件。
该扩展支持多种流行的 JavaScript 框架，并会沿事件目标节点向上遍历到事件监听器所在节点，
查找适合展示和拆分调用树的属性。如果未找到框架特定属性，则会停在 id 属性。
如果没有 ID，则会查找“控制元素”，如 a、button 或 input。
如果都未找到，则显示注册事件监听器的元素。
某些情况下，自动检测的属性可能不适用，您可能希望采用不同的调用树拆分方式。 例如，某些框架会自动分配 ID，但更可读的方式是将所有元素按操作的语义描述分组。 若要实现不同的调用树拆分，可在 HTML 元素上添加如下属性：
data-jprofiler="..."
添加到目标元素或目标与事件监听器之间的任一元素上。该属性中的文本将用于拆分，其他属性会被忽略。
调用树拆分
在调用树视图中，XHR 调用会针对每个不同的浏览器事件和调用栈组合进行调用树拆分。
拆分节点会显示浏览器事件的信息。
如果没有事件在进行中（如调用 setTimeout()），则会内联显示最近的几个栈帧。
这些节点上的“显示更多”超链接会打开与 视图→显示节点详情 操作相同的详情对话框。 对于 JavaScript 拆分节点，详情对话框不会显示节点文本，而是显示完整的浏览器调用栈。 若要查看其他 JavaScript 拆分节点的调用栈，可保持非模态详情对话框打开并点击相应节点， 详情对话框会自动更新内容。
