익숙한가요? Chrome DevTools에서 성능 문제를 디버그하고 있는데 성능 패널에 너무 많은 정보가 표시되어 가장 관련성이 높고 조치 가능한 부분에만 집중하기가 어렵습니다. 타임라인의 길이, 플레임 차트의 깊이, 다양한 데이터 트랙의 폭 때문에 탐색하기가 어려울 수 있습니다. 성능 패널은 매우 강력하지만 유용성을 위해 사용성을 희생해서는 안 됩니다.
Chrome의 성능 도구를 개선하기 위한 이니셔티브의 일환으로 Google은 최근 정보 밀도를 줄이고 개발자가 워크플로를 맞춤설정할 수 있도록 지원하는 세 가지 새로운 기능을 출시했습니다.
이 게시물에서는 이러한 기능을 각각 자세히 살펴보고 이를 사용하여 가장 중요한 정보에만 집중하는 방법을 보여줍니다.
타임라인의 관련 없는 부분 숨기기
웹 성능은 밀리초 단위로 작동하므로 성능 녹화 시간이 몇 초에 불과하더라도 위치를 놓칠 수 있는 충분한 기회가 있습니다.
Chrome 122에서는 탐색경로를 만드는 기능을 추가했습니다. 이 기능을 사용하면 타임라인의 경계를 고정하여 내가 설정한 관심 영역 내에서만 확대/축소하거나 화면을 이동할 수 있습니다. 이러한 방식으로 타임라인을 제한하는 것은 예를 들어 응답성 문제를 디버그하려고 할 때 특히 유용합니다. 단일 상호작용이나 문제가 있는 긴 작업에 집중할 수 있기 때문입니다.
위의 스크린샷은 스크립트 실행 및 프레젠테이션 작업과 같은 기본 스레드 활동을 시각화하는 타임라인 개요를 확대한 모습입니다. 포인터를 그 위에 가져가면 타임라인의 경계를 현재 창으로 설정하는 새 버튼이 표시됩니다. 버튼에는 시간 창의 너비(밀리초)와 아이콘이 라벨로 표시됩니다. 탐색경로는 타임라인 개요 위에 표시되며 각 탐색경로에는 시간 범위의 크기가 라벨로 지정됩니다.
이 기능을 사용하려면 다음 안내를 따르세요.
- 타임라인을 관심 영역으로 확대/축소하고 화면을 이동합니다.
- 타임라인 개요에서 돋보기 아이콘 을 클릭하여 타임라인을 고정하고 탐색경로를 설정합니다.
- 필요한 경우 반복하여 중첩된 관심 영역을 확대합니다.
- 이전 관심분야 또는 전체 타임라인으로 돌아가려면 탐색경로를 클릭합니다.
타임라인을 자르면 실수로 타임라인의 범위를 벗어나 관련 없는 부분으로 스크롤하는 일이 방지됩니다. 필요한 경우 탐색경로를 클릭하여 다시 축소할 수 있습니다. 또 다른 이점은 타임라인 개요가 다음 트랙과 일치한다는 것입니다. 이렇게 하면 강제 리플로와 같은 성능 기회를 훨씬 더 쉽게 발견하고 플레임 차트에서 근본 원인을 파악할 수 있습니다.
플레임 차트의 관련 없는 부분 숨기기
기본 스레드 활동을 분석하는 것은 쉬운 일이 아닙니다. 성능 패널의 이 부분은 호출 스택이 길고 가늘어질 수 있으므로 화염 차트라고 합니다. 극단적인 경우 이러한 스택이 너무 커서 전체를 파악하고 최적화하려는 항목에 집중하기가 어려울 수 있습니다.
Chrome 124부터 플레임 차트에서 숨길 항목을 정확하게 맞춤설정하여 가장 실행 가능한 정보에 집중할 수 있습니다.
Flame 차트에서 함수를 마우스 오른쪽 버튼으로 클릭하면 항목을 숨기는 여러 옵션이 있는 컨텍스트 메뉴가 표시됩니다.
- 함수 숨기기: 선택한 함수를 플레임 차트에서 삭제합니다. 하위 요소는 위로 이동하여 상위 함수 바로 뒤에 표시됩니다.
- 하위 요소 숨기기: 선택한 함수에서 플레임 차트를 프루닝하여 모든 하위 요소를 숨깁니다.
- 반복되는 하위 요소 숨기기: 선택한 함수의 모든 인스턴스를 플레임 차트의 나머지 부분에서 삭제합니다.
함수가 선택된 경우 사용할 수 있는 몇 가지 유용한 단축키도 있습니다.
- H: 선택한 함수 숨기기
- C: 선택한 함수의 하위 요소 숨기기
- R: 스택에서 나중에 선택한 함수의 인스턴스를 숨깁니다.'
- U: 선택한 함수의 숨겨진 하위 요소 표시
관련 없는 스크립트 영구 숨기기
무시 목록에 스크립트 추가 옵션을 사용하면 선택한 함수와 동일한 스크립트 파일 내에 정의된 기타 모든 함수가 플레임 차트에서 숨겨집니다. 스크립트는 DevTools 디버거가 함수를 건너뛰고 스크립트에서 발생한 예외를 무시하는 데 사용하는 무시 목록에도 추가됩니다.
무시 목록에 추가된 스크립트는 유지되므로 새 트레이스의 플레임 차트에서 계속 숨겨집니다. 제어할 수 없는 스크립트는 무시 목록에 추가하는 것이 좋습니다. 반면에 개별 함수를 숨기는 것은 현재 트레이스에 일시적으로 적용되며 상황에 더 많이 좌우됩니다. 예를 들어 추적을 더 쉽게 처리할 수 있도록 번거로운 재귀 함수 호출 스택을 숨기고 싶을 수 있습니다.
플 flame 차트에서 무시 목록 또는 기타 숨겨진 함수를 되돌리려면 컨텍스트 메뉴를 사용하여 선택한 함수의 하위 요소를 재설정하거나 트레이스 전체에서 숨겨진 모든 함수를 재설정하면 됩니다. 숨겨진 하위 요소가 있는 함수에는 클릭 시 하위 요소를 재설정하는 ▼ 아이콘이 주석으로 표시됩니다.
플레임 차트에서 불필요한 깊이와 복잡성을 제거하면 훨씬 더 유용하게 사용할 수 있습니다. 필요한 경우 표시되는 항목을 맞춤설정할 수 있는 기능은 현재 작업에 가장 중요한 정보에 집중할 수 있도록 하는 인체공학적 개선사항입니다.
관련 없는 트랙 숨기기
기본 스레드 활동은 성능 패널의 트랙 하나만 구성합니다. 성능 패널의 트랙은 프로세스의 활동을 시각화하며 디버깅을 돕기 위해 모두 공통 타임라인에 정렬됩니다. 기본 트랙 외에도 페이지에서 사용하는 다른 하위 프레임, 스레드, 작업자뿐 아니라 네트워크, 프레임, 애니메이션, 상호작용 트랙의 개별 트랙이 있습니다. 더 많은 트랙은 IO, GPU, 컴포저이터와 같은 하위 수준 Chrome 프로세스의 활동을 표시합니다. 정보가 너무 많습니다. 하지만 대부분의 공연 워크플로에서는 한 번에 몇 트랙의 정보만 신경 쓰면 됩니다.
Chrome 125부터 불필요한 트랙을 숨기거나 원하는 대로 재정렬할 수 있는 새로운 구성 모드가 제공됩니다. 예를 들어 느린 상호작용을 최적화하는 경우 상호작용, 기본, GPU 트랙을 제외한 모든 항목을 숨길 수 있습니다.
트랙을 수정하려면 트랙 이름을 마우스 오른쪽 버튼으로 클릭하고 트랙 구성…을 선택합니다. 그러면 구성 모드가 열리며 여기에서 개별 트랙을 표시, 숨기기 또는 재정렬할 수 있습니다. 트랙 구성 완료 버튼을 클릭하여 환경설정을 저장합니다.
트랙을 구성하면 실적 패널이 워크플로에 중요한 정보를 표시하는 방식을 제어할 수 있습니다. 이 설정을 사용하여 관련 없는 프로세스에서 활동을 숨기고 필요한 데이터에 가장 쉽게 액세스할 수 있는 방식으로 트랙을 이동할 수 있습니다.
요약
이 세 가지 기능은 실적 워크플로를 맞춤설정할 수 있는 강력한 새로운 인체공학적 컨트롤을 제공합니다. 이러한 기능을 사용하고 노이즈 양을 줄이면 원하는 정보를 찾고 데이터를 이해하는 데 훨씬 더 유리합니다.
잘 작동하는 부분이나 사용 환경을 개선할 수 있는 방법에 관한 의견을 보내주세요. 궁금한 점이 있거나 일반적인 의견이 있으면 @ChromeDevTools에 문의해 주세요. 문제가 있거나 새로운 기능에 관한 제안이 있으면 이 미해결 문제에 댓글을 남겨주세요.
이는 Chrome의 성능 도구를 개선하기 위한 이니셔티브의 시작에 불과합니다. 성능 패널을 더 쉽고 강력하게 만들기 위해 준비 중인 다른 모든 사항을 공유할 수 있어 기쁩니다. 다음번에는 개발자용 Chrome 블로그에 다음 기능을 소개하는 게시물을 게시할 예정입니다. 그동안 Chrome의 새로운 기능 페이지를 확인하여 DevTools 및 Chrome의 새로운 기능을 모두 확인하세요.