To use this feature, you have to use Google Chrome as the browser and install the JProfiler origin tracker extension.
The Chrome extension adds a button with a JProfiler icon
to the tool bar that starts tracking. When you start tracking, the extension will
intercept all XHR calls
and report them to a locally running JProfiler instance. As long as tracking has not
been started, JProfiler
will show an information page that tells you how to set up JavaScript XHR origin tracking.
When tracking is activated, the JProfiler extension will ask you to reload the page. This is necessary for adding instrumentation. If you choose to not reload the page, event detection may not work.
The tracking status is persistent on a per-domain basis. If you restart the browser while tracking is active and visit the same URL, tracking will automatically be enabled, without the need to reload the page.
If the XHR calls are handled by a JVM that is profiled by an active profiling session in JProfiler, the JavaScript XHR view will show a cumulated call tree of these calls. If the view remains empty, you can switch the "Scope" at the top of the view to "All XHR calls" to check if any XHR calls have been made.
Javascript call stack nodes include information
on the source file and the line number. The function where the XHR call is made has
a
special icon and and adjacent
hyperlink in case the XHR call was handled by the profiled JVM. The hyperlink will
take you to the
Javascript splitting node in the call tree view where you can
see the server side call tree that was responsible for handling requests of this type.
At the top of the tree you find browser event
nodes that show event name and element name together with important attributes that
help you pin down the source
of the event. Not all requests have an associated event.
The extension is aware of several popular JavaScript frameworks and walks the ancestor
hierarchy between the
target node of an event up to the node where the event listener is located, looking
for attributes that are
suitable for display and splitting the call tree. Failing to find framework-specific
attributes, it stops at
an id
attribute. In the absence of an ID, it searches for "control elements" like a
,
button
or [input]. All failing, the element where the event listener is registered
will be shown.
In some cases, the automatic detection of interesting attributes may not be suitable
and you may prefer a different
call tree splitting. For example, some frameworks assign automatic IDs while is would
be more readable to
group all elements together with a semantic description of the action.
To achieve a different call tree splitting, add the HTML attribute data-jprofiler="..."
to the target
element or an element between the target and the location of the event listener. The
text in that attribute
will be used for splitting and other attributes will be ignored.
The "show more" hyperlink on these nodes opens the same detail dialog that is opened by the View->Show Node Details action. For JavaScript splitting nodes, the detail dialog does not show the text of the node, but the entire browser call stack. To inspect the call stack of other JavaScript splitting nodes, leave the non-modal detail dialog open and click on those nodes, the detail dialog will update its contents automatically.