성능 추적 파일 분석기

성능 추적 파일 분석기

큰 추적 파일을 DevTools에서 자세히 열기 전에 기록된 주요 이벤트 위치를 찾습니다. 메인 스레드 긴 작업을 표시하고 예상치 못한 레이아웃 이동을 기록된 세션 구간으로 묶으며, 확인 가능한 상호작용 구간과 LCP 후보 표시의 traceEvents 인덱스를 제공합니다. 저장한 일부 기록을 전체 방문이나 실제 사용자 Web Vitals 측정으로 간주하지 않습니다.

주요 기능

• 이름이 확인된 렌더러 메인 스레드의 50ms 초과 RunTask, 내부 활동 3개까지의 근거와 스레드 미확인 구분
• had_recent_input에 따른 이동 분리, 영향받은 노드 ID와 기록된 1초/5초 구간 집계
• 실제 INP·LCP 수치를 만들지 않는 EventTiming 구간과 LCP 후보 표시
• traceEvents 원본 인덱스를 가진 시간순 필터 표
• 로컬 JSON·gzip 파일 읽기와 원본 인수를 뺀 검토 JSON 저장

사용 방법

1. Chrome DevTools 성능 패널에서 조사할 로딩 또는 상호작용을 기록하고 추적 파일을 저장합니다.
2. JSON 또는 압축 JSON 파일을 선택하거나 JSON을 붙여넣거나 수정 가능한 예제를 엽니다.
3. 분석한 뒤 이벤트 수와 범위 주의 문구를 확인합니다.
4. 타임라인을 종류별로 걸러 보고 traceEvents 인덱스로 DevTools 원본 이벤트를 찾습니다.
5. 필요하면 검토 보고서를 저장하고 실제 Web Vitals는 적합한 현장 측정 도구로 확인합니다.

활용 예시

• 반응이 느린 상호작용 주변의 긴 렌더러 작업 위치 찾기
• 예상치 못한 레이아웃 이동의 원본 이벤트 인덱스 찾기
• 한 번 기록한 사용자 흐름의 상호작용 구간 비교하기
• 원본 인수를 뺀 제한된 이벤트 요약을 개발자에게 전달하기

자주 묻는 질문

개인정보 안내

선택한 추적 파일은 이 페이지의 메모리에서 처리합니다. 이 도구가 파일을 업로드하거나 URL·브라우저 저장소에 넣지 않습니다. Chrome 추적 파일 자체에는 페이지 URL, 주석, 스크립트 내용과 소스맵이 포함될 수 있습니다. 내려받는 보고서에는 알아본 이벤트 이름·시간·이동 점수·숫자 노드 ID·스레드 ID·인덱스만 넣고 원본 인수와 파일 전체는 제외합니다. 원본을 공유하기 전에 확인하세요.

관련 도구