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

Question

Мне нужно отладить веб-приложение, которое использует jQuery для выполнения довольно сложных и грязных манипуляций DOM . В какой-то момент некоторые события, которые были связаны с определенными элементами, не запускаются и просто перестают работать.

Если бы у меня была возможность редактировать исходный код приложения, я бы развернул и добавил кучу Firebug console.log() операторов и комментировал / раскомментировал фрагменты кода, чтобы попытаться определить проблему. Но давайте предположим, что я не могу редактировать код приложения и мне нужно полностью работать в Firefox, используя Firebug или аналогичные инструменты.

Firebug очень хорошо позволяет мне ориентироваться и манипулировать DOM. Однако до сих пор я не смог понять, как выполнять отладку событий с помощью Firebug. В частности, я просто хочу увидеть список обработчиков событий, привязанных к определенному элементу в данный момент времени (используя точки останова Firebug JavaScript для отслеживания изменений). Но либо Firebug не способен видеть связанные события, либо я слишком туп, чтобы его найти. : -)

Любые рекомендации или идеи? В идеале я просто хотел бы видеть и редактировать события, связанные с элементами, подобно тому, как я могу редактировать DOM сегодня.

Answer 1

См. Как найти прослушиватели событий на узле 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!') }"
  })
  

Answer 2

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

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

Answer 3

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

Answer 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>');
});

Источник: (мой блог) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Answer 5

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

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

Answer 6

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

например:

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

Answer 7

Как предложил коллега, console.log> alert:

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

Answer 8

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

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

Выполнение console.log($("a#somefoo").data("events")) должно перечислить события, прикрепленные к этому элементу.

Answer 9

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

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

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

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

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

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

Answer 10

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.