Chrome 124에서 자바스크립트 프로파일러 패널이 지원 중단됩니다. 앞으로는 성능 패널을 사용하여 Node.js CPU 성능을 프로파일링하세요.
JavaScript 프로파일러가 지원 중단되는 이유는 무엇인가요? (JS 프로파일러)
빠르면 Chrome 58부터 DevTools팀이 최종적으로 JS 프로파일러를 지원 중단할 계획입니다. 여기에는 다음과 같은 몇 가지 이유가 있습니다.
- 더 이상 적극적으로 개발되지 않습니다. JS 프로파일러는 몇 년 동안 주요 업데이트를 받지 못했으며 팀은 계속 개발하기 위한 리소스가 없습니다.
- 보다 간소화된 프로파일링 환경. Performance 패널은 이미 모든 종류의 성능 분석에 사용되고 있으며 Node.js에서 JavaScript CPU 성능을 프로파일링할 수 있으므로 일관성과 효율성을 위해 모든 항목을 한곳에 통합하는 것이 좋습니다.
- 성능 패널이 더 좋습니다. Google에서는 새로운 기능과 개선사항을 추가하여 실적 분석을 위한 더욱 강력하고 사용자 친화적인 도구로 만들고 있습니다.
지원 중단 후에는 어떻게 해야 하나요?
JavaScript CPU 성능을 프로파일링하는 방법에 관한 자세한 내용은 Node.js 성능 프로파일링을 참고하세요.
다음은 성능 패널 사용에 관한 몇 가지 도움말입니다.
- Flame Chart를 사용하여 성능 병목 현상을 식별합니다.
- 상향식 및 호출 트리 탭을 사용해 함수 간의 관계를 이해합니다.
지원 중단은 어떻게 처리하나요?
Google에서는 프로토타입을 개발하고 의견 요청 (RFC)을 GitHub에 공개적으로 게시하여 개발자 의견을 얻었습니다.
또한 Google에서는 개발자 전문가에게 프로토타입을 테스트할 수 있도록 적극적으로 연락하며, 우려사항이나 문제를 해결하여 Performance(성능) 패널이 핵심 프로파일링 요구사항을 충족하는지 확인합니다.
개발자가 조정하고 채택할 시간을 충분히 주기 위해 JS 프로파일러를 4단계로 점진적으로 개선해 나가고 있습니다.
주요 문제 및 해결 방법
Google이 받은 의견 중 가장 시급한 문제는 세 가지 주요 문제였습니다.
.cpuprofile파일 형식 지원. JS 프로파일러는 다른 파일 형식을 사용합니다. Performance(성능) 패널에서 지원해야 합니다.- 로드 속도가 느립니다. 패널의 로드 속도가 느려 프로파일링 프로세스를 방해하는 것으로 보입니다.
- JavaScript VM 선택기가 누락되었습니다. JavaScript VM 인스턴스 선택기가 없으면 특정 시나리오에서 프로파일링 기능이 제한되었습니다.
각 문제를 살펴보고 어떻게 해결했는지 살펴보겠습니다.
느린 로드 속도
개발자들에 따르면 성능 패널에서 대용량 데이터 파일을 로드하는 데 시간이 너무 오래 걸리고, 때로는 다운되는 경우도 있었습니다.
우리는 DevTools를 사용하여 DevTools를 분석했습니다 (이를 "DevTools-on-DevTools"라고 함). 문제가 발견되어 몇 가지 최적화 작업이 이루어졌습니다.
Set를Array데이터 구조로 대체했습니다.- 불필요한
Map데이터 구조를 삭제했습니다. - 메모리 스택 사용량을 줄이기 위해 재귀 함수를 반복 (for 루프)으로 리팩터링했습니다.
이러한 병목 현상을 해결하여 대용량 파일의 로드 속도를 80% 향상할 수 있었습니다. 🎉
블로그 게시물 perf-ception을 통해 400% 더 빨라진 Performance 패널에서 자세히 알아보세요.
누락된 JavaScript VM 선택기
초기 프로토타입에 JavaScript VM 선택기가 없습니다. 개발자는 이를 사용하여 특정 VM 인스턴스를 상세히 살펴보고 분석하는 데 집중할 수 있습니다.
JavaScript VM 선택기가 Performance 패널에 추가되었습니다. 사용 가능한 모든 JavaScript VM 인스턴스의 드롭다운 목록이 표시됩니다. 인스턴스를 선택하면 성능 패널에 해당 인스턴스의 CPU 프로필이 로드됩니다.
cpuprofile 파일 형식 지원
이전에는 Performance(성능) 패널에서는 트레이스 이벤트 배열이 있는 JSON 파일인 트레이스 파일만 지원되었습니다.
반면 JS 프로파일러는 JSON 객체를 포함하는 .cpuprofile 확장자를 가진 파일인 CPU 프로필을 지원했습니다. 다음과 같이 표시됩니다.
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
새 워크플로는 개발자가 기존 cpuprofile를 분석하는 것을 막지 않습니다. 따라서 이제 Performance 패널에서는 트레이스 파일과 CPU 프로필을 모두 지원합니다. cpuprofile 파일을 Performance로 가져오면 올바르게 로드됩니다.
Google은 배후에서 정규 표현식을 사용하여 객체 구조 차이를 감지합니다. 파일 콘텐츠가 {"nodes":[로 시작하면 CPU 프로필입니다. 그 외의 경우에는 추적 파일입니다.
콘텐츠 유형이 확인되면 적절하게 처리합니다. 트레이스 파일의 경우 이벤트를 파싱하고 타임라인을 빌드합니다. CPU 프로필의 경우 JSON 객체를 파싱하고 Flame Chart를 작성합니다.
결론
Performance 패널을 사용하면 Node.js 및 Deno 애플리케이션의 웹사이트와 프로파일링 CPU 성능 모두에서 보다 간소화된 프로파일링 환경을 이용할 수 있습니다.
의견이나 제안사항이 있으면 이 버그에 댓글을 추가하거나 다음 옵션 중 하나를 사용하여 문의해 주세요.
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.
- crbug.com을 통해 제안 또는 의견을 제출하세요.
- DevTools에서 옵션 더보기
> 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다. - @ChromeDevTools로 트윗을 보냅니다.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.