2014-05-11 3 views
3

클릭하면 특정 HTML 요소가 작동합니다. 해당 줄을 추가하는 줄을 찾을 수 없습니다. 도움이 될만한 도구가 있습니까?특정 js 이벤트 처리기를 추가하는 행을 찾는 방법은 무엇입니까?

Chrome dev 도구> 요소 (요소 선택, 오른쪽 패널 참조)> 이벤트 리스너>를 클릭하면 줄 번호가있는 몇 개의 js 파일이 나열되지만 js 플러그인입니다. 내가 필요한 것은 그 라인을 사용하여 그 플러그인을 사용하는 요소를 결정하는 것입니다.

또한 .click( 검색을 시도했지만 1) 클릭 이벤트 2) 문제의 선이 다른 구문으로 기록 될 수 있습니다, 예를 들어, 할당 너무 많은 다른 요소가있다 : .on('click'

+0

http://stackoverflow.com/questions/10050465/set-a-javascript-breakpoint-in-code-in-chrome/23459325#23459325 – martynas

+0

내가 아니다 이걸 정확하게 이해한다면 기존 클릭 이벤트에 디버거 줄을 추가 하시겠습니까? 그러나 문제는 기존 클릭 이벤트 라인을 찾는 방법입니다. –

+0

아니요, DOM 노드를 찾을 수 있지만 js가 이벤트 처리기를 추가 한 위치는 어디입니까? –

답변

1

재정의이 같은 EventTarget로하여 addEventListener 프로토 타입은 그런 다음 console.log에 중단 점을 추가하고 Chrome dev console을 사용하면 스택 추적을보고 추가 된 위치를 확인할 수 있습니다. 당신이

이 이벤트를 추가하기 전에이 추가 소스를 발견 한 후

그냥 사용하지 않도록 설정해야합니다.

EventTarget.prototype.addEventListener = function(type,listener,useCapture) { 
if (this.id === 'id of the element you are tracking') 
    console.log('breakpoint!'); 
}; 

샘플 사용 : enter image description here

관련 문제