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

웹 사이트에 ~ 100-200 개의 자바 스크립트 함수가로드되어 있습니다. Google 크롬에서 한 항목 또는 다른 항목을 클릭 할 때 어떤 자바 스크립트 기능이 실행되는지 확인하고 싶습니다. Chrome 웹 개발자 도구로 어떻게 할 수 있나요? 감사!

한 가지 간단한 방법은 Chrome 개발자 도구를 시작하고 소스 패널로 전환 한 다음 F8(실행 일시 중지)를 누르는 것입니다. 이것은 처음 실행 된 JavaScript 문에서 중단됩니다.

또 다른 방법은 mousedown 또는 click에 대한 이벤트 리스너 중단 점을 설정하는 것입니다. 동일한 소스 패널에서 오른쪽 사이드 바의 "이벤트 리스너 중단 점"을 확장합니다. "마우스"항목을 확장하고 중단하려는 이벤트를 선택합니다 (예 : "클릭", "마우스 다운"). 그런 다음 페이지를 클릭하고 DevTools에서 JS 실행 중단을 확인하십시오. 즐겨!

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

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

기본적으로 녹화 시작 :

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

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

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

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

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

Google 크롬에서 한 항목 또는 다른 항목을 클릭 할 때 어떤 자바 스크립트 기능이 실행되는지 확인하고 싶습니다.

이제 바로이를 수행하는 Visual Event 라는 훌륭한 확장 기능 이 있습니다. 인기있는 js 라이브러리 (jQuery, YUI, MooTools, Prototype, Glow) 및 DOM 레벨 0 이벤트를 통해 설정된 이벤트 핸들러 만 인식합니다.