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 뷰에 이러한 호출의 누적 호출 트리가 표시됩니다. 뷰가 비어 있는 경우, 뷰 상단의 "Scope"를 "All XHR calls"로 전환하여 XHR 호출이 발생했는지 확인할 수 있습니다.
JavaScript 호출 스택 노드에는 소스 파일 및 라인 번호에 대한 정보가 포함됩니다. XHR 호출이 프로파일된 JVM에서 처리된 경우, XHR 호출이 발생한 함수에는 특수 아이콘과 인접한 하이퍼링크가 표시됩니다. 이 하이퍼링크를 클릭하면 호출 트리 뷰의 JavaScript 분할 노드로 이동하여 이러한 유형의 요청 처리를 담당했던 서버 측 호출 트리를 확인할 수 있습니다.
트리 상단에는 이벤트의 소스를 정확히 파악하는 데 도움이 되는 중요 속성과 함께 이벤트 이름 및 엘리먼트 이름을 표시하는 브라우저 이벤트 노드가 있습니다. 모든 요청에 연관된 이벤트가 있는 것은 아닙니다.
확장 프로그램은 널리 사용되는 여러 JavaScript 프레임워크를 인식하며, 이벤트 대상 노드부터
이벤트 리스너가 위치한 노드까지의 상위 계층 구조를 탐색하여 표시 및 호출 트리 분할에
적합한 속성을 찾습니다. 프레임워크별 속성을 찾지 못하면 id 속성에서 중지합니다.
ID가 없는 경우 a, button 또는 input과 같은 "제어 엘리먼트"를
검색합니다. 모두 찾지 못하면 이벤트 리스너가 등록된 엘리먼트가 표시됩니다.
일부 경우에는 관심 있는 속성의 자동 감지가 적합하지 않을 수 있으며 다른 방식의 호출 트리 분할을 선호할 수 있습니다. 예를 들어 일부 프레임워크는 자동 ID를 할당하지만, 동작에 대한 의미적 설명과 함께 모든 엘리먼트를 그룹화하는 것이 가독성이 더 높을 수 있습니다. 다른 방식의 호출 트리 분할을 적용하려면 HTML 속성
data-jprofiler="..."
을(를) 대상 엘리먼트 또는 대상과 이벤트 리스너 위치 사이의 엘리먼트에 추가하십시오. 해당 속성의 텍스트가 분할에 사용되고 다른 속성은 무시됩니다.
호출 트리 분할
호출 트리 뷰에서 XHR 호출은 브라우저 이벤트와 호출 스택의 개별 조합마다 호출 트리를 분할합니다.
분할 노드에는 브라우저 이벤트에 대한
정보가 표시됩니다. setTimeout() 호출과 같이 진행 중인 이벤트가 없는 경우
마지막 몇 개의 스택 프레임이 인라인으로 표시됩니다.
이러한 노드의 "show more" 하이퍼링크는 View→Show Node Details 액션으로 열리는 것과 동일한 세부 정보 대화상자를 엽니다. JavaScript 분할 노드의 경우 세부 정보 대화상자에 노드 텍스트 대신 전체 브라우저 호출 스택이 표시됩니다. 다른 JavaScript 분할 노드의 호출 스택을 검사하려면 비모달 세부 정보 대화상자를 열어 둔 채로 해당 노드들을 클릭하십시오. 세부 정보 대화상자의 내용이 자동으로 업데이트됩니다.
