[javascript] Chrome의 Javascript 실행 추적-어떻게?

실행 일시 중지의 대안 (일반적으로 잘 작동하지만주기적인 코드를 자주 실행하는 페이지에서는 잘 작동하지 않음)

Chrome의 프로파일 러를 사용하여 짧은 시간 동안 녹화 할 수 있습니다. 녹음을 마치면 녹음 중에 실행 된 모든 기능에 소비 된 CPU 시간의 요약이 표시됩니다. CPU 시간은 신경 쓰지 않고, 어떤 기능이 실행되었는지 보여주기 때문에이 도구를 사용했습니다.

기본적으로 녹화 시작 :

참고 : Chrome 58 이상에서는이 탭의 이름이 ‘메모리’로 변경되었습니다. 참고

그런 다음 작업을 수행합니다 (예 : 웹 페이지의 버튼을 클릭하거나 흥미로운 코드가 실행되도록하는 모든 작업을 수행). 그런 다음 기록을 중지하고 결과를 확인합니다.

호출 스택을 보여주는 “하향식”보기 모드를 사용하고 있으며 드릴 다운하여 결국 호출 된 함수를 볼 수 있습니다. 예를 들어, 일부 익명 함수가 먼저 호출 (setTimeout 또는 일부 클릭 이벤트 처리기의 결과로 발생) s.track.s.t한 다음 호출되는 방식으로 식별되는 일부 메서드 를 호출 s_doPlugins했습니다. 중요한 것은 하향식 모드에 있다는 것입니다. 트리의 맨 위에있는 항목은 호출 스택의 시작을 형성하고, 그들은 일반적으로 어떤 타이머 기능에 의해 등록 된 기능 (것 때문에 setTimeout, setInterval, requestAnimationFrame, 등) 또는 어떤 이벤트 핸들러 ( click, mousemove, load, 등 .).

또한 왼쪽에서 오른쪽으로 차트에 어떤 함수가 호출되었는지 보여주는 “차트”보기 모드를 사용할 수도 있습니다. 이렇게하면 레코딩 내에서 코드가 실행 된 시간 (예 : 중간에)을 알고 있기 때문에 실제로 찾고있는 기능을 식별하는 데 도움이됩니다.

btw-대부분의 다른 최신 브라우저에도 비슷한 기능이 있다고 생각합니다.