게시일: 2024년 11월 13일
성능 트레이스를 살펴보면서 가장 긴 작업이나 불필요한 작업 부분과 같은 특정 영역을 강조 표시하려고 한다고 가정해 보겠습니다. 나중에 참고할 수 있도록 메모를 작성하거나 동료와 결과를 공유하고 싶었을 수 있습니다. 가장 좋은 방법은 무엇인가요?
물론 트레이스를 큰 종이에 인쇄하고 직접 메모를 작성하거나 서드 파티 소프트웨어를 사용하여 트레이스의 스크린샷에 메모를 그리는 방법도 있습니다. (지금까지는 이 방법이 가장 좋았습니다.)
개발자 워크플로를 간소화하기 위한 Google의 노력의 일환으로 이러한 옵션의 대안인 성능 패널 내에서 트레이스에 주석을 직접 추가하는 기능을 도입하게 되었습니다.
이제 트레이스에 주석을 달고, 주석을 쉽게 탐색하고, 트레이스 파일 내에 직접 저장할 수도 있습니다. 이렇게 하면 강조 표시된 통계를 파일을 보내는 것처럼 간편하게 공유할 수 있으며 외부 도구나 해결 방법이 필요하지 않습니다. 주석은 성능 디버깅에 도움이 될 뿐만 아니라 동료와 빠르게 의견을 공유하거나 많은 주고받음 없이 상황을 이해하는 데도 도움이 됩니다.
주석에는 세 가지 유형이 있습니다.
주석이 있는 기간: 타임라인의 기간에 라벨 지정
주석이 달린 항목: 타임라인의 항목에 라벨을 추가합니다.
항목 연결: 두 항목을 화살표로 연결하여 관계를 표시합니다.
각 주석 유형과 유용할 수 있는 시나리오를 살펴보겠습니다.
주석이 있는 기간
DevTools의 일반적인 워크플로는 느린 상호작용을 디버그하기 위해 트레이스를 기록하는 것입니다. 트레이스 보기는 처음에는 다소 복잡해 보일 수 있지만 특정 이벤트 핸들러와 호출 스택을 드릴다운하면 이해하기 쉬워집니다. 추적 보기를 더 쉽게 사용할 수 있도록 하려면 일반적으로 시간 블록을 어떻게 사용하는지 라벨을 지정하는 주석을 만드는 것이 좋습니다. 예를 들어 사용자 상호작용 후 UI가 의미 있게 업데이트되도록 기간에 주석을 달면 유용할 수 있습니다.
시간 범위에 주석을 추가하려면 Shift 키를 누른 상태에서 상호작용 시작 부분에서 UI 업데이트 부분으로 드래그합니다. 그런 다음 라벨을 입력하여 주석을 만듭니다. 선택한 범위가 올바르지 않으면 입력하기 전에 클릭하여 취소합니다. 또는 주석의 라벨을 수정하려면 주석을 더블클릭합니다. 현재는 기존 주석의 기간을 조정할 수 없습니다. 기간이 잘못된 경우 주석을 삭제하고 새 주석을 만듭니다.
이 주석을 사용하면 사용자에게 표시되는 변경사항이 적용되기 전에 실행되어야 하는 모든 작업을 더 명확하게 확인할 수 있으므로 그에 따라 디버깅에 집중할 수 있습니다.
주석이 달린 항목
사용자에게 표시되는 변경사항을 더 명확하게 하려면 전환을 담당하는 작업에 항목 라벨로 주석을 달 수도 있습니다.
항목의 라벨을 만들려면 선택한 항목을 더블클릭하고 라벨을 입력하거나 항목을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 '항목 라벨 지정'을 선택합니다. 주석의 라벨을 수정하려면 항목이나 라벨을 더블클릭합니다. 또는 컨텍스트 메뉴에서 '라벨 항목' 옵션을 선택합니다.
이러한 항목 주석을 사용하면 상호작용에 중요한 작업과 그렇지 않은 작업, 그리고 걸리는 시간을 더 쉽게 파악할 수 있습니다.
항목 연결
트레이스에 주석을 추가하는 세 번째 방법은 상호작용과 전환을 담당하는 긴 태스크 간의 연결을 그리는 것입니다.
항목 간에 연결을 생성하는 방법: 다른 항목에 연결할 항목을 더블클릭하고 해당 항목 오른쪽에 표시되는 화살표를 클릭합니다. 그런 다음 연결하려는 항목을 클릭합니다. 또는 항목을 마우스 오른쪽 버튼으로 클릭하고 항목 컨텍스트 메뉴에서 '항목 연결'을 선택합니다.
따라서 상호작용 자체는 종료되었지만 이 유형의 주석을 사용하여 궁극적으로 UI를 차단하는 후속 긴 작업과 연결된 방식을 더 명확하게 표시할 수 있습니다.
주석 삭제 및 숨기기
사이드바의 주석 목록 보기에서 모든 주석을 빠르게 삭제할 수 있습니다. 주석 위로 마우스를 가져가면 휴지통 아이콘 이 표시됩니다. 이 아이콘을 클릭하면 주석이 삭제됩니다.
또는 특정 이벤트와 연결된 항목 라벨 및 항목 연결 주석을 삭제하려면 이벤트를 마우스 오른쪽 버튼으로 클릭하고 '주석 삭제'를 선택합니다. 라벨이 있는 주석은 라벨을 삭제하고 주석을 저장하여 삭제할 수도 있습니다.
주석을 삭제하지 않고 숨겨서 트레이스를 탐색하는 데 방해가 되지 않도록 하려면 주석 사이드바 하단에 있는 '주석 숨기기' 체크박스를 선택하면 됩니다. 이 환경설정이 저장됩니다. 이 설정이 사용 설정된 상태에서 주석이 있는 트레이스를 로드하면 체크박스를 선택 해제할 때까지 주석이 숨겨진 상태로 유지됩니다.
주석이 달린 트레이스 저장 또는 로드
좋습니다. 나와 다른 사용자가 트레이스를 이해하는 데 도움이 되는 주석을 모두 추가했습니다. 다음 단계
이전에는 주석을 추가하기 전에 동료에게 전송하기 위해 트레이스의 스크린샷을 찍어야 했지만 이제는 그럴 필요가 없습니다. 주석이 달린 파일을 저장한 후 해당 파일을 전송하면 됩니다. 이제 지원팀에서 파일을 성능 패널에 업로드하고 추적 컨텍스트에서 추가한 모든 주석을 확인하거나 주석을 추가하여 다시 보낼 수 있습니다.
DevTools는 트레이스 뷰에 다른 유형의 맞춤설정도 저장합니다. 예를 들어 확대/축소하고 탐색경로를 설정하여 관심 영역을 분리하거나 관련 없는 호출 스택에서 항목을 숨길 수 있으며, 이러한 모든 설정은 트레이스 파일에 유지되므로 성능 디버깅에 더욱 쉽게 협력할 수 있습니다. 이러한 맞춤설정을 통해 스크린샷과 달리 전체 상호작용 트레이스의 맥락을 제공하면서 가장 중요한 부분에 관심을 집중시킬 수 있습니다.
주석 및 기타 맞춤설정을 보존하려면 다운로드 아이콘 아래에 있는 트레이스 저장 옵션을 클릭합니다. 트레이스가 로드되면 이러한 맞춤설정이 모두 포함됩니다. 주석을 사용하여 저장하는 것이 기본 옵션이지만 원시 트레이스 파일만 저장하려면 주석 없이 트레이스 저장 옵션을 선택합니다.
결론
한꺼번에 많은 정보를 흡수해야 하는 것처럼 보이지만 걱정하지 마세요. 주석을 만드는 방법은 언제든지 실적 패널 사이드바의 주석 탭에서 확인할 수 있습니다. 이 탭은 주석이 없는 경우 안내를 제공하고 주석이 생성되면 주석의 목록 보기를 표시합니다.
마찬가지로 성능 패널의 주석을 사용하면 개발자가 트레이스 내에서 중요한 순간을 정확하게 파악하여 맞춤설정된 컨텍스트와 통계를 추가할 수 있습니다. 이렇게 하면 분석 프로세스가 간소화되어 성능 최적화를 더 쉽게 공유하고 공동작업할 수 있습니다. 성능 패널에서 주석을 사용해 보고 의견을 알려주세요. 의견이 있으시면 공개 문제에 댓글을 남겨 주세요.
외부 도구의 필요성을 잊고 더 효율적인 워크플로를 경험해 보세요.