Как отлаживать привязки событий JavaScript / jQuery к Firebug или аналогичным инструментам?

См. Раздел Как найти прослушиватели событий на узле DOM .

Вкратце, предположив, что в какой-то момент к вашему элементу прикреплен обработчик событий (например): $('#foo').click(function() { console.log('clicked!') });

Вы проверяете его так:

• jQuery 1.3.x

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

• jQuery 1.4.x

   var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }" }) 

См. jQuery.fn.data (где jQuery хранит ваш обработчик внутри себя).

• jQuery 1.8.x

   var clickEvents = $._data($('#foo')[0], "events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }" }) 

Есть хороший букмарклет с именем Visual Event, который может показать вам все события, связанные с элементом. Он имеет цветные подсветки для различных типов событий (мышь, клавиатура и т. Д.). Когда вы наводите на них курсор, он показывает тело обработчика события, его привязку и номер файла / строки (в WebKit и Opera). Вы также можете запустить событие вручную.

Он не может найти каждое событие, потому что нет стандартного способа поиска того, какие обработчики событий привязаны к элементу, но он работает с такими популярными библиотеками, как jQuery, Prototype, MooTools, YUI и т. Д.

Расширение Eventbug было выпущено вчера, см.: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

Вы можете использовать FireQuery . Он показывает любые события, связанные с элементами DOM на вкладке HTML Firebug. Он также показывает любые данные, прикрепленные к элементам через $.data .

Вот плагин, который может перечислять все обработчики событий для любого данного элемента / события:

 $.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('
' + element.nodeName + ': 
' + data + '<\/pre>'); });
 от // 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('
' + element.nodeName + ': 

' + data + '<\/pre>'); });
 
  Src: (мой блог) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/ 

Консоль разработчика WebKit (в Chrome, Safari и т. Д.) Позволяет просматривать прикрепленные события для элементов.

Более подробно в этом вопросе о переполнении стека

Используйте $._data(htmlElement, "events") в jquery 1.7+;

например:

$._data(document, "events") или $._data($('.class_name').get(0), "events")

Как сказал коллега, console.log> alert:

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

jQuery хранит события в следующем:

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

Выполнение console.log($("a#somefoo").data("events")) должно console.log($("a#somefoo").data("events")) список событий, связанных с этим элементом.

Используя DevTools в последнем Chrome (v29), я нахожу эти два совета очень полезными для отладки событий:

1. Список событий jQuery для последнего выбранного элемента DOM

   • Осмотреть элемент на странице
   • введите в консоли следующее:

   $ ._ data ( $ 0 , “events”) // Предполагая, что jQuery 1.7+

2. Он будет перечислять все связанные с ним объекты событий jQuery, развернуть интересующее событие, щелкнуть правой кнопкой мыши по функции свойства «обработчик» и выбрать «Показать определение функции». Он откроет файл, содержащий указанную функцию.

3. Использование команды monitorEvents ()

Похоже, команда FireBug работает над расширением EventBug. Он добавит еще одну панель в FireBug – Events.

«Панель событий отобразит все обработчики событий на странице, сгруппированной по типу события. Для каждого типа события вы можете открыть, чтобы увидеть элементы, к которым привязаны слушатели, и сводка источника функции». EventBug Rising

Хотя они не могут сказать прямо сейчас, когда он будет выпущен.

Я также нашел jQuery Debugger в магазине chrome. Вы можете щелкнуть элемент dom и показать все связанные с ним события вместе с функцией обратного вызова. Я отлаживал приложение, в котором события не удалялись должным образом, и это помогло мне отслеживать его за считанные минуты. Очевидно, это для хром, хотя и не firefox.

значок ev рядом с элементами

В панели « Инспектор инструментов разработчика Firefox» перечислены все события, связанные с элементом.

Сначала выберите элемент с помощью Ctrl + Shift + C , например стрелка upvote Stack Overflow.

Нажмите значок ev справа от элемента и откроется диалог:

Нажмите на знак паузы || символ для желаемого события, и это открывает отладчик в строке обработчика.

Теперь вы можете разместить точку останова, как обычно, в отладчике, щелкнув левое поле линии.

Это упоминается в: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

К сожалению, я не мог найти способ, чтобы это играло красиво с прелестью, оно просто открывается на мини-линии: как украсить Javascript и CSS в Firefox / Firebug?

Протестировано на Firefox 42.

Согласно этой теме , в Firebug нет способа посмотреть, какие события подключены к слушателям в элементе DOM.

Похоже, что лучше всего сделать то, что предлагает tj111, или вы можете щелкнуть правой кнопкой мыши элемент в средстве просмотра HTML и нажать «Log Events», чтобы вы могли видеть, какие события запускаются для определенного элемента DOM. Я полагаю, что можно было бы это сделать, чтобы узнать, какие события могут уволить определенные функции.

В версии 2.0 Firebug появилась панель « События» , в которой перечислены все события для элемента, выбранного в настоящее время на панели HTML .

Он также может отображать прослушиватели событий, завернутые в привязки событий jQuery, в случае проверки опции Show Wrapped Listeners , доступ к которой вы можете получить через меню опций панели « События » .

С этой панелью рабочий процесс для отладки обработчика событий выглядит следующим образом:

1. Выберите элемент с прослушивателем событий, который вы хотите отлаживать.
2. Внутри боковой панели « События» щелкните правой кнопкой мыши функцию в соответствующем событии и выберите « Установить точку останова»
3. Запустить событие

=> Выполнение скрипта остановится в первой строке функции обработчика событий, и вы можете отладить его.

Firebug 2 теперь включает отладку / проверку DOM-событий.