Chrome DevTools - Chrome 58에서 자바스크립트 CPU 프로파일링
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
현재 Canary 버전인 Chrome 58에서 타임라인 패널의 이름이 Performance 패널로 변경되었고, Profiles(프로필) 패널의 이름이 Memory 패널로 변경되었으며, Profiles 패널의 Record JavaScript CPU Profile 기능이 더 숨겨진 위치로 이동했습니다.
장기적인 목표는 이전의 JavaScript CPU 프로파일러를 삭제하고 모든 사람이 새 워크플로를 사용하도록 하는 것입니다.
이 이전 가이드에서는 Performance 패널에서 JS 프로필을 기록하는 방법과 성능 패널의 UI가 익숙한 이전 워크플로에 매핑되는 방식을 설명합니다.
이전 JavaScript CPU 프로파일러 액세스
프로필 패널에서 사용할 수 있었던 이전의 'JavaScript CPU 프로필 기록' 워크플로를 선호하는 경우 다음과 같이 계속 액세스할 수 있습니다.
DevTools 기본 메뉴 를 엽니다.
More tools > JavaScript Profiler 를 선택합니다. JavaScript 프로파일러 라는 새 패널에서 이전 프로파일러가 열립니다.
경고: 장기적인 목표는 모든 사용자를 새 워크플로로 마이그레이션하는 것입니다.
이 워크플로는 향후 DevTools 버전에서 삭제될 수 있습니다.
JS 프로필 기록 방법
DevTools를 엽니다.
실적 탭을 클릭합니다.
그림 1 . 실적 패널
다음 방법 중 하나로 녹화합니다.
페이지 로드를 프로파일링하려면 페이지 로드 기록 을 클릭합니다.
DevTools는 자동으로 기록을 시작한 다음 페이지 로드가 완료된 것을 감지하면 자동으로 중지합니다.
실행 중인 페이지를 프로파일링하려면 기록 을 클릭하고 프로파일링할 작업을 실행한 다음 완료되면 중지 를 클릭합니다.
기존 워크플로가 새 워크플로에 매핑되는 방식
아래 스크린샷은 이전 워크플로의 차트 뷰에서 새 워크플로의 CPU 사용량 개요 차트 (위쪽 화살표)와 Flame 차트 (하단 화살표)의 위치를 보여줍니다.
그림 2 . 이전 워크플로 (왼쪽)와 새 워크플로 (오른쪽)의 Flame Chart 간 매핑
Heavy (Bottom Up) 뷰는 Bottom-Up 탭에서 사용할 수 있습니다.
그림 3 . 이전 워크플로 (왼쪽)의 상향식 뷰와 새 워크플로 (오른쪽) 간의 매핑
Tree (Top Down) 보기는 Call Tree 탭에서 사용할 수 있습니다.
그림 4 . 이전 워크플로의 트리 보기 (왼쪽)와 새 워크플로 (오른쪽) 간의 매핑
놓친 기능이 있거나 이 문서에 관해 다른 궁금한 점이 있으면 트위터에서 @ChromeDevTools 를 핑하거나 문서 저장소에서 GitHub 문제를 여세요 .
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2016-12-15(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2016-12-15(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2016-12-15(UTC)"]]