Як налагодити прив'язки подій JavaScript / jQuery за допомогою Firebug або подібних інструментів?

Мені потрібно налагодити веб-додаток, який використовує jQuery, щоб зробити досить складні та брудні маніпуляції з DOM . Одного разу деякі події, які були пов'язані з певними елементами, не звільняються і просто перестають працювати.

Якби у мене була можливість редагувати джерело програми, я б розгорнув і додав купу тверджень Firebug console.log() та коментарі / коментарі, щоб спробувати визначити проблему. Але припустимо, що я не можу редагувати код програми та мені потрібно повністю працювати в Firefox за допомогою Firebug або подібних інструментів.

Firebug дуже добре дозволяє мені орієнтуватися та маніпулювати DOM. Поки що, я не зміг зрозуміти, як зробити налагодження подій за допомогою Firebug. Зокрема, я просто хочу побачити список обробників подій, прив'язаних до певного елемента в даний момент часу (використовуючи точки відключення Firebug JavaScript для відстеження змін). Але або Firebug не має можливості бачити пов'язані події, або я занадто німий, щоб його знайти. :-)

Якісь рекомендації чи ідеї? В ідеалі я просто хотів би бачити та редагувати події, пов'язані з елементами, аналогічно тому, як я можу редагувати DOM сьогодні.

Див. Розділ Як знайти слухачів подій на вузлі 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!') }"
  })

Є приємна закладка під назвою Visual Event, яка може показати вам усі події, прикріплені до елемента. Він має кольорові виділення для різних типів подій (миша, клавіатура тощо). Коли ви наведіть на них курсор, він показує тіло обробника подій, як він був прикріплений, та номер файлу / рядка (у WebKit та Opera). Ви також можете запустити подію вручну.

Він не може знайти кожну подію, оскільки не існує стандартного способу пошуку того, які обробники подій приєднані до елемента, але він працює з популярними бібліотеками, такими як jQuery, Prototype, MooTools, YUI тощо.

Ви можете використовувати 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> попередження:

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

jQuery зберігає події в наступному:

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

Робити a console.log($("a#somefoo").data("events")) перелік подій, приєднаних до цього елемента.

Використовуючи DevTools в останній Chrome (v29), я вважаю ці два поради дуже корисними для налагодження подій:

1. Перерахування подій jQuery останнього вибраного елемента DOM

   • Огляньте елемент на сторінці
   • введіть у консолі наступне:

     $ ._ дані ( $ 0 , "події") // припускаючи jQuery 1.7+

   • У ньому буде перераховано всі пов'язані з ним об’єкти події jQuery, розгорнеться зацікавлена ​​подія, клацніть правою кнопкою миші функцію властивості "обробник" та виберіть "Показати визначення функції". Він відкриє файл, що містить вказану функцію.

2. Використання команди monitorEvents ()

Схоже, бригада FireBug працює над розширенням EventBug. Це додасть ще одну панель FireBug - події.

"На панелі подій будуть перераховані всі обробники подій на сторінці, згрупованій за типом події. Для кожного типу події ви можете відкритись, щоб побачити елементи, до яких прив’язані слухачі, та резюме джерела функції." Підвищення подій

Хоча зараз вони не можуть сказати, коли він вийде.

Я також знайшов відладчик jQuery в магазині хрому. Ви можете натиснути на елемент dom, і він покаже всі пов'язані з ним події разом з функцією зворотного дзвінка. Я налагоджував програму, де події не були видалені належним чином, і це допомогло мені відстежити це за лічені хвилини. Очевидно, це стосується хрому, але не firefox.

ev значок поруч із елементами

На панелі інспекторів інструментів для розробників Firefox перераховані всі події, пов'язані з елементом.

Спочатку виберіть елемент з Ctrl+ Shift+ C, наприклад, стрілка оновлення Stack Overflow.

Клацніть evпіктограму праворуч від елемента, і відкриється діалог:

Клацніть на знаку паузи || для потрібної події, і це відкриє налагоджувач у рядку обробника.

Тепер ви можете розмістити там точку перерви, як зазвичай, у відладчику, клацнувши лівим полем рядка.

Про це йдеться у: веб-сторінці https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

На жаль, я не зміг знайти спосіб, щоб це добре зіграло з вишуканістю, воно, здається, відкривається на мінімізованій лінії: Як прикрасити Javascript та CSS у Firefox / Firebug?

Тестовано на Firefox 42.

Відповідно до цього потоку , у Firebug немає можливості переглянути, які події додаються слухачам до елемента DOM.

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

З версією 2.0 Firebug представив панель " Події " , на якій перераховані всі події для елемента, обраного в даний час на панелі HTML .

Він також може відображати слухачів подій, загорнутих у прив'язки подій jQuery, якщо встановлено прапорець Show Wrapped Listeners , до якого можна звернутися через меню параметрів панелі Events .

На цій панелі робочий процес налагодження обробника подій такий:

1. Виберіть елемент із слухачем подій, який ви хочете налагодити
2. Всередині бічної панелі " Події " клацніть правою кнопкою миші функцію під пов’язаною подією та виберіть Встановити точку перерви
3. Запустити подію

=> Виконання сценарію зупиниться на першому рядку функції обробника подій, і ви можете поетапно налагодити його.

Firebug 2 тепер включає в себе налагодження / перевірку подій DOM.