게시일: 2025년 3월 19일
Chrome 성능 도구 개선을 위한 이니셔티브에 대한 지속적인 지원의 일환으로 DevTools 성능 패널과 상호작용하는 방법을 업그레이드하는 기능을 추가로 발표하게 되어 기쁩니다. 이러한 개선사항은 성능 트레이스를 탐색하고 관련 없는 노이즈를 줄여 성능 문제를 신속하게 추적하고 해결하는 데 집중할 수 있도록 설계되었습니다.
탐색 개선
성능 패널에서 스크롤하고 확대/축소하는 것이 직관적이지 않다는 사용자의 의견이 많았습니다. 오랜 사용자는 익숙하지만 많은 사용자는 스크롤 동작이 트레이스를 확대/축소하는 것이 아니라 스크롤한다고 기대합니다.
아래의 새 옵션을 사용하면 기존의 '기존' 스크롤과 새로운 '최신' 접근 방식 간에 전환할 수 있습니다.
기존 모드에서는 트랙패드나 스크롤 휠을 사용해 스크롤하면 계속 확대 및 축소되고, Shift 키를 누른 상태에서 스크롤하면 플레임 차트가 위아래로 스크롤됩니다.
새로운 모던 모드에서는 스크롤이 플레임 차트를 스크롤하고 Shift 키와 스크롤을 함께 사용하면 확대/축소됩니다.
WASD를 사용하여 트레이스를 탐색하는 등의 단축키는 변경되지 않고 계속 작동합니다.
양방향 개요
실적 패널 상단에는 타임라인 개요의 일부인 CPU 차트가 있습니다. 트레이스 기록 중에 추정된 CPU 사용량을 작업 유형별로 분류하여 표시합니다 (예: 스크립트 실행의 경우 주황색, 렌더링 작업의 경우 보라색).
이를 통해 트레이스의 개요(미니맵이라고도 함)를 확인할 수 있으며, 특정 문제를 조사하기 위해 더 확대하더라도 전체 타임라인의 대략적인 요약을 확인할 수 있습니다.
하지만 주로 트레이스를 볼 때 미니맵에서 정확한 위치를 놓치기 쉽고 그 반대의 경우도 마찬가지이므로 개요를 확대된 보기에 연결하는 데 도움이 되는 새로운 기능이 도입되었습니다. 이제 개요 위로 마우스를 가져가면 플레임 차트에 해당하는 세로선이 표시되어 플레임 차트에서 동일한 시점을 표시합니다.
마찬가지로 플 flamechart의 항목 위로 마우스를 가져가면 CPU 차트의 해당 부분이 강조 표시됩니다. 이렇게 하면 CPU 급증의 원인이 되는 작업을 정확하게 파악할 수 있습니다.
트레이스 필터링
성능 문제를 디버그하려면 일반적으로 대량의 데이터를 선별해야 합니다. 가장 관련성 높은 정보에 집중할 수 있도록 노이즈를 필터링하는 기능을 개선했습니다.
작년에 DevTools 무시 목록에 성능 패널의 스크립트를 추가하는 기능이 도입되어 플레임 차트에서 관련성이 낮은 항목이 필터링되었습니다. 예를 들어 페이지에서 구성요소의 성능을 디버그하는 경우 프레임워크의 호출 스택이 너무 깊어서 성능 패널을 위아래로 스크롤해야 한다면 방해가 될 수 있으며, 중요한 부분에 집중하기 위해 호출 스택의 대부분을 접으려고 할 때가 많습니다.
플 flamechart에서 항목을 마우스 오른쪽 버튼으로 클릭하고 Add script to ignore list(무시 목록에 스크립트 추가)를 선택하면 스크립트가 DevTools 무시 목록에 추가되고 플 flamechart에서 해당 스크립트의 항목이 모두 접힙니다.
이제 성능 패널 상단의 에서 직접 무시 목록을 수동으로 수정할 수도 있습니다. 무시 목록 정규식은 DevTools 전반에서 공유되므로 소스 패널에서 디버깅할 때 일치하는 스크립트가 건너뛰어지고 플 flamechart에서 단일 항목으로 접히며 목록은 DevTools 세션 전반에서 유지됩니다.
이렇게 하면 무시할 파일을 세부적으로 제어할 수 있으며 작업 중에 규칙을 사용 설정하거나 사용 중지할 수 있는 편리한 위치를 확보할 수 있습니다.
서드 파티 스크립트 흐리게 표시
서드 파티 스크립트는 웹사이트에서 흔히 볼 수 있지만, 종종 제어할 수 없거나 특정 디버깅 세션과 관련이 없을 수 있습니다. 성능 패널 상단에 있는 새로운 서드 파티 어둡게 표시 옵션을 사용하면 타임라인에서 서드 파티 스크립트와 네트워크 활동이 비활성화되어 시각적 혼잡을 줄이고 퍼스트 파티 성능 기여도에 집중할 수 있습니다.
하지만 특정 서드 파티에 집중하거나 자체 API 또는 CDN의 기여만 허용하도록 더 세부적으로 제어하고 싶은 경우도 있습니다. 요약 탭의 패널 하단에는 DevTools에서 페이지에서 찾을 수 있는 퍼스트 파티 및 서드 파티가 분류되어 있습니다. 목록의 각 항목 위로 마우스를 가져가면 해당 항목에서 발생하지 않은 활동이 비활성화됩니다.
결론
이러한 새로운 기능을 사용하면 성능 패널을 더 효과적으로 탐색하고 노이즈를 필터링하여 중요한 트레이스 부분에 집중할 수 있습니다. 이 기능을 사용해 보고 더 개선할 수 있는 방법이나 추가로 개선하고 싶은 기능이 있는지 Google에 알려주세요.