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

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

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

Answer 5

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