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

Там есть хороший букмарклет с именем 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('<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 +;

Пример:

$._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")) должно содержать список событий, связанных с этим элементом.

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

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

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

     $._ data ($ 0, "events")//принятие jQuery 1. 7+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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