JavaScript XHR 원본 추적을 사용하면 브라우저에서 XMLHttpRequest 또는 Fetch 요청 중에 서로 다른 스택 트레이스에 대해 서블릿 호출을 분할할 수 있어, 프로파일된 JVM의 활동을 브라우저의 동작과 더 잘 연관시킬 수 있습니다. 다음에서 "XHR"은 XMLHttpRequest와 Fetch 메커니즘 모두를 지칭합니다.

브라우저 플러그인

이 기능을 사용하려면 브라우저로 Google Chrome을 사용하고 JProfiler 원본 추적기 확장 프로그램을 설치해야 합니다.

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 분할 노드의 호출 스택을 검사하려면 비모달 세부 정보 대화 상자를 열어 두고 해당 노드를 클릭하십시오. 세부 정보 대화 상자는 자동으로 내용을 업데이트합니다.