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