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

есть хороший инструмент, называется Визуальное Событие это может показать вам все события, прикрепленные к элементу. Он имеет цветные подсветки для различных типов событий (мышь, клавиатура и т. д.). При наведении указателя мыши на них отображается тело обработчика событий, способ его прикрепления и номер файла/строки (в 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('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src: (мой блог) ->http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

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

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

использовать $._data(htmlElement, "events") в jquery 1.7+;

ex:

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

как предложил коллега, консоль.журнал > предупреждение:

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")) должен перечислить события, прикрепленные к этому элементу.

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

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

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

     $._data ($0, "события") / / предполагая jQuery 1.7+

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

2. используя monitorEvents (команда)

похоже, что команда FireBug работает над расширением EventBug. Он добавит еще одну панель в FireBug-события.

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

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

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

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

В Firefox Developer Tools'инспектора панель перечисляет все события, связанные с элементом.

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

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

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

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

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

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

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

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

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

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

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

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

1. выберите элемент с помощью прослушивателя событий, который вы хотите отладить
2. внутри событий на боковой панели щелкните правой кнопкой мыши функцию под соответствующим событием и выберите Установить Точку Останова
3. событие

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

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