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