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

Question

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

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

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

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

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

592

event-handling firebug javascript javascript-events jquery

автор: Ciro Santilli 新疆改造中心六四事件法轮功

16 ответов

автор: Crescent Fresh · Accepted Answer · 2017-05-23 12:34:42

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

автор: Matthew Crumley · Accepted Answer · 2012-08-10 13:35:42

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

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

автор: Jan Odvarko · Accepted Answer · 2016-05-02 16:16:14

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

автор: Shrikant Sharat · Accepted Answer · 2011-07-29 16:08:33

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

автор: James · Accepted Answer · 2009-02-20 21:04:56

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

$.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/

автор: Cristian Sanchez · Accepted Answer · 2017-05-23 12:26:23

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

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

автор: Tamás Pap · Accepted Answer · 2012-08-20 15:12:59

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

ex:

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

автор: Flevour · Accepted Answer · 2009-11-18 16:31:20

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

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

автор: Alex Heyd · Accepted Answer · 2013-06-26 07:35:27

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

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

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

автор: mateuscb · Accepted Answer · 2013-09-03 22:49:53

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

список событий jQuery последний выбранный элемент DOM
- Проверьте элемент на странице
- введите в консоли следующее:
  
  $._data($0, "события") / / предполагая jQuery 1.7+
- в нем будут перечислены все объекты событий jQuery, связанные с разверните заинтересованное событие, щелкните правой кнопкой мыши на функции свойства " обработчик "и выберите"Показать определение функции". Он откроет файл, содержащий указанную функцию.
используя monitorEvents (команда)

автор: jayarjo · Accepted Answer · 2009-10-28 13:35:02

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

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

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

автор: Rob · Accepted Answer · 2012-04-27 16:15:35

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

автор: Ciro Santilli 新疆改造中心六四事件法轮功 · Accepted Answer · 2018-05-24 09:29:30

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

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

Сначала выберите элемент с 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.

автор: Daniel Lew · Accepted Answer · 2009-02-20 20:03:29

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

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

автор: Sebastian Zartner · Accepted Answer · 2015-11-24 22:26:37

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

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

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

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

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

автор: MRalwasser · Accepted Answer · 2014-06-11 14:33:03

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

0

автор: MRalwasser