[JQUERY] 어떻게 방화범 또는 유사한 도구를 사용하여 자바 스크립트 / jQuery를 이벤트 바인딩을 디버깅하는 방법?

어떻게 방화범 또는 유사한 도구를 사용하여 자바 스크립트 / jQuery를 이벤트 바인딩을 디버깅하는 방법?

해결법

1. ---

   1.DOM 노드에 이벤트 리스너를 찾는 방법을 참조하십시오.

   DOM 노드에 이벤트 리스너를 찾는 방법을 참조하십시오.

   간단히 말해서, 이벤트 핸들러가 요소에 연결되어 어떤 점에서 가정 (예) :. $ ( '# foo는')을 클릭 (함수 () {을 console.log ( '! 클릭')});

   당신은 너무처럼 검사 :

   (jQuery를 내부적으로 핸들러를 저장)를 참조 jQuery.fn.data.

2. ---

   2.당신이 요소에 연결된 모든 이벤트를 표시 할 수 있습니다 비주얼 이벤트라는 좋은 북마크가있다. 그것은 다른 이벤트의 유형 (마우스, 키보드 등) 색상 코드 하이라이트를 가지고있다. 당신이 가져가 그들에, 그것이 부착 된 방법 이벤트 핸들러의 본문 및 (웹킷과 오페라에) 파일 / 행 번호를 표시합니다. 또한 수동으로 이벤트를 트리거 할 수 있습니다.

   당신이 요소에 연결된 모든 이벤트를 표시 할 수 있습니다 비주얼 이벤트라는 좋은 북마크가있다. 그것은 다른 이벤트의 유형 (마우스, 키보드 등) 색상 코드 하이라이트를 가지고있다. 당신이 가져가 그들에, 그것이 부착 된 방법 이벤트 핸들러의 본문 및 (웹킷과 오페라에) 파일 / 행 번호를 표시합니다. 또한 수동으로 이벤트를 트리거 할 수 있습니다.

   이벤트 핸들러가 요소에 첨부 된 것을 찾아 볼 수있는 표준 방법이 없기 때문에이 모든 이벤트를 찾을 수 있지만, 그것은 등 jQuery를, 프로토 타입, Mootools의, YUI, 같은 인기있는 라이브러리와 함께 작동

3. ---

   3.당신은 FireQuery를 사용할 수 있습니다. 그것은 방화범의 HTML 탭에서 DOM 요소에 부착 된 이벤트를 보여줍니다. 또한 $ .DATA 통해 소자에 연결된 데이터를 나타낸다.

   당신은 FireQuery를 사용할 수 있습니다. 그것은 방화범의 HTML 탭에서 DOM 요소에 부착 된 이벤트를 보여줍니다. 또한 $ .DATA 통해 소자에 연결된 데이터를 나타낸다.

4. ---

   4.여기에 특정 요소 / 이벤트에 대한 모든 이벤트 핸들러를 나열 할 수 있습니다 플러그인입니다 :

   여기에 특정 요소 / 이벤트에 대한 모든 이벤트 핸들러를 나열 할 수 있습니다 플러그인입니다 :

   $.fn.listHandlers = function(events, outputFunction) {
       return this.each(function(i){
           var elem = this,
               dEvents = $(this).data('events');
           if (!dEvents) {return;}
           $.each(dEvents, function(name, handler){
               if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
                  $.each(handler, function(i,handler){
                      outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
                  });
              }
           });
       });
   };
   

   이처럼 사용

   // List all onclick handlers of all anchor elements:
   $('a').listHandlers('onclick', console.info);
   
   // List all handlers for all events of all elements:
   $('*').listHandlers('*', console.info);
   
   // Write a custom output function:
   $('#whatever').listHandlers('click',function(element,data){
       $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
   });
   

   SRC : (내 블로그) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

5. ---

   5.(크롬, 사파리 등에 있음) 웹킷 개발자 콘솔은 요소에 대한 첨부 이벤트를 볼 수 있습니다.

   (크롬, 사파리 등에 있음) 웹킷 개발자 콘솔은 요소에 대한 첨부 이벤트를 볼 수 있습니다.

   이 스택 오버플로 문제의 자세한 내용

6. ---

   6.$ ._ 데이터를 사용 (는 HTMLElement, "이벤트") 1.7+ JQuery와의;

   $ ._ 데이터를 사용 (는 HTMLElement, "이벤트") 1.7+ JQuery와의;

   전의:

   $ ._ 데이터 (문서, "이벤트") 또는 $ ._ 데이터 ($ ( '. class_name에'). 수 (0), "이벤트")

7. ---

   7.동료가 제안한 것처럼, CONSOLE.LOG> 경고 :

   동료가 제안한 것처럼, CONSOLE.LOG> 경고 :

   var clickEvents = $('#foo').data("events").click;
   jQuery.each(clickEvents, function(key, value) {
       console.log(value);
   })
   

8. ---

   8.다음에 jQuery를 이벤트를 저장합니다 :

   다음에 jQuery를 이벤트를 저장합니다 :

   $("a#somefoo").data("events")
   

   을 console.log 수행 ($ ( "A #의 somefoo은"). 데이터 ( "이벤트")) 해당 요소에 부착 된 이벤트를 나열해야합니다.

9. ---

   9.내가 이벤트를 디버깅에 매우 도움이 두 가지 도움말을 찾을 최신 크롬 (V29)에 DevTools로 사용 :

   내가 이벤트를 디버깅에 매우 도움이 두 가지 도움말을 찾을 최신 크롬 (V29)에 DevTools로 사용 :

10. ---

    10.지르고 승무원처럼 보인다는 EventBug 확장에 노력하고 있습니다. 이벤트 - 그것은 방화 광에 다른 패널을 추가합니다.

    지르고 승무원처럼 보인다는 EventBug 확장에 노력하고 있습니다. 이벤트 - 그것은 방화 광에 다른 패널을 추가합니다.

    "이벤트 패널은 이벤트 유형별로 그룹화 페이지에서 이벤트 핸들러를 모두 나열합니다. 각 이벤트 유형의 당신은 청취자와 함수 소스의 요약 바인딩 요소를 볼 열 수 있습니다." EventBug 상승

    그들은 지금 출시되는시기라고 할 수는 없지만.

11. ---

    11.나는 또한 크롬 저장소에 jQuery를 디버거를 발견했다. 당신은 DOM의 항목을 클릭 할 수 있으며 콜백 함수와 함께 바인드 모든 이벤트를 표시합니다. 나는 이벤트가 제대로 제거하고이 날 분을 추적 도움을 받고되지 않은 응용 프로그램을 디버깅했다. 분명히 이것은 크롬하지만,하지 파이어 폭스입니다.

    나는 또한 크롬 저장소에 jQuery를 디버거를 발견했다. 당신은 DOM의 항목을 클릭 할 수 있으며 콜백 함수와 함께 바인드 모든 이벤트를 표시합니다. 나는 이벤트가 제대로 제거하고이 날 분을 추적 도움을 받고되지 않은 응용 프로그램을 디버깅했다. 분명히 이것은 크롬하지만,하지 파이어 폭스입니다.

12. ---

    12.EV 아이콘 옆의 요소

    EV 아이콘 옆의 요소

    파이어 폭스 개발자 도구 '관리자 패널리스트 내의 모든 이벤트는 요소에 바인딩.

    Ctrl 키와 첫 번째 요소를 선택 + + C, 예를 들어 시프트 스택 오버플로의 upvote에 화살표.

    요소의 오른쪽에있는 EV 아이콘을 클릭하고 대화가 열립니다 :

    일시 정지 기호를 클릭 || 당신이 원하는,이 핸들러의 라인에 디버거를 여는 이벤트에 대한 기호.

    이제 라인의 왼쪽 여백을 클릭하면, 디버거에서이 평소와 같이 중단 점을 배치 할 수 있습니다.

    https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners : 이것은에서 언급

    어떻게 파이어 폭스 / 방화범 자바 스크립트와 CSS를 아름답게하는 방법 : 불행하게도, 나는이 prettyfication 멋지게 연주 할 수있는 방법을 찾을 수 없습니다, 바로 축소 된 줄에서 열 보인다?

    파이어 폭스 42에서 테스트.

13. ---

    13.이 스레드에 따르면, 이벤트는 DOM 요소에 청취자에 부착 된 것을 볼 수 방화범의 방법이 없습니다.

    이 스레드에 따르면, 이벤트는 DOM 요소에 청취자에 부착 된 것을 볼 수 방화범의 방법이 없습니다.

    그것은 tj111이 시사하는 것 중 하나, 또는 당신은 HTML 뷰어에서 요소를 마우스 오른쪽 단추로 클릭하고 이벤트가 특정 DOM 요소에 대해 발사되는 볼 수 있도록 "로그 이벤트"를 클릭 할 수 당신이 할 수있는 가장 좋은 것 같습니다. 나는 하나의 이벤트가 특정 기능을 발사 할 수있는 것을보기 위해 그렇게 할 수도있을 것 같군요.

14. ---

    14.버전 2.0 방화범은 요소에 대한 모든 이벤트는 현재 HTML 패널 내에서 선택을 나열합니다 이벤트 패널을 소개했다.

    버전 2.0 방화범은 요소에 대한 모든 이벤트는 현재 HTML 패널 내에서 선택을 나열합니다 이벤트 패널을 소개했다.

    그것은 또한 당신이 이벤트 패널의 옵션 메뉴를 통해 도달 할 수있는 리스너를 포장 표시 옵션이 선택되어 경우의 jQuery 이벤트 바인딩에 랩 이벤트 리스너를 표시 할 수 있습니다.

    해당 패널로 이벤트 핸들러를 디버깅 할 수있는 워크 플로우는 다음과 같습니다

    => 스크립트 실행이 이벤트 핸들러 함수의 첫 번째 줄에 중단되고 디버그에게 그것을 단계 수 있습니다.

15. ---

    15.방화범 2 / 검사 디버깅을 지금 법인 (法人) DOM 이벤트를한다.

    방화범 2 / 검사 디버깅을 지금 법인 (法人) DOM 이벤트를한다.

from https://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tools by cc-by-sa and MIT license