借助 JavaScript XHR 来源跟踪 (origin tracking)，您可以在进行 XMLHttpRequest 或 Fetch 请求时，针对浏览器中不同的调用栈跟踪 (stack trace) 拆分 servlet 调用， 从而更好地将被分析 (profiled) JVM 中的活动与浏览器中的操作关联起来。 在下文中，“XHR”同时指代 XMLHttpRequest 和 Fetch 机制。
浏览器插件
要使用此功能，您必须使用 Google Chrome 作为浏览器，并安装 JProfiler origin tracker 扩展。
该 Chrome 扩展会在工具栏中添加一个带有 JProfiler 图标的按钮用于启动跟踪。启动跟踪后，该扩展将拦截所有 XHR 调用并将其报告给本地运行的 JProfiler 实例。只要跟踪尚未启动，JProfiler 就会显示一个信息页面，告知您如何设置 JavaScript XHR 来源跟踪 (origin tracking)。
激活跟踪后，JProfiler 扩展将请求您重新加载页面。这对于添加插桩 (instrumentation) 是必需的。如果您选择不重新加载页面，事件检测可能无法正常工作。
跟踪状态按域名进行持久化。如果跟踪处于活动状态时重启浏览器并访问相同的 URL，跟踪将自动启用，而无需重新加载页面。
JavaScript XHR 树
如果 XHR 调用由 JProfiler 中处于活动状态的分析会话 (session) 所分析 (profiled) 的 JVM 处理， JavaScript XHR 视图 (view) 将显示这些调用的累积调用树 (call tree)。如果视图 (view) 仍为空，您可以将视图顶部的“Scope”切换为“All XHR calls”，以检查是否进行了任何 XHR 调用。
JavaScript 调用栈 (call stack) 节点包含有关源文件和行号的信息。 如果 XHR 调用由被分析 (profiled) 的 JVM 处理，发起 XHR 调用的函数会带有一个 特殊图标和相邻的超链接。 该超链接将带您转到调用树视图 (call tree view)中的 JavaScript 拆分节点， 您可以在其中查看负责处理此类请求的服务器端调用树 (call tree)。
在树的顶部，您可以找到 浏览器事件节点， 这些节点显示事件名称和元素名称以及重要属性，帮助您确定事件的来源。并非所有请求都有关联的事件。
该扩展能够识别几种流行的 JavaScript 框架，并在事件的目标节点到事件监听器所在的节点之间的祖先层级结构中进行遍历，查找适合用于显示和拆分调用树的属性。
如果找不到特定于框架的属性，它会停在 id 属性上。在没有 ID 的情况下，它会搜索诸如 a、
button 或 input 之类的“控制元素”。如果均未找到，则将显示注册了事件监听器的元素。
在某些情况下，对受关注属性的自动检测可能并不合适，您可能希望采用不同的调用树拆分。例如，某些框架会分配自动 ID，但将所有元素与操作的语义描述组合在一起会更具可读性。要实现不同的调用树拆分，请将 HTML 属性
data-jprofiler="..."
添加到目标元素或目标与事件监听器位置之间的元素中。该属性中的文本将用于拆分，而其他属性将被忽略。
调用树拆分
在调用树视图 (call tree view) 中，XHR 调用将针对浏览器事件和调用栈 (call stack) 的每个单独组合拆分调用树。
这些
拆分节点会显示有关浏览器事件的信息。
如果当前没有正在进行的事件（例如在调用 setTimeout() 时），最后几个栈帧将内联显示。
这些节点上的“show more”超链接会打开与 视图 (View)→显示节点详细信息 (Show Node Details) 操作相同的详细信息对话框。 对于 JavaScript 拆分节点，详细信息对话框不显示节点的文本，而是显示整个浏览器调用栈 (call stack)。要检查其他 JavaScript 拆分节点的调用栈 (call stack)， 请保持非模态详细信息对话框处于打开状态并单击这些节点。详细信息对话框将自动更新其内容。
