Инструменты для отладки jQuery events
Часто бывает нужно определить, какие обработчики навешаны на DOM-элементы. К сожалению, из коробки ни FireBug, ни Chrome Developer Tools не дают возможности удобно ответить на этот вопрос, так как показывают лишь прямые обработчики, которые были повешены присваиванием element.onclick = handler. Если же для этого использовался jQuery, то узнать о наличии обработчиков можно только просканировав дерево элементов до document, просматривая то, что хранится в $._data(element, ‘events’). Для этого я написал небольшой сниппет, который добавил в код сайта:
/** * Дампер jquery on- и live-обработчиков. * @author elwood * 16.10.13 15:43 */ /** * Выводит дамп on- и live-обработчиков для указанного объекта и всех его родителей. * У тех обработчиков, у которых определён селектор, выводятся также дочерние узлы (относительно * элемента, к которому привязан обработчик), удовлетворяющие ему. * @param $object */ function dumpEvents($object) { var $current = $object; while ($current.length != 0) { console.info("processing %o", $current[0]); var eventsObject = $._data($current[0], 'events'); for (var property in eventsObject) { console.info(property + ':'); var handlers = eventsObject[property]; for (var i = 0; i < handlers.length; i++) { if (typeof handlers[i].selector != undefined && handlers[i].selector != null) { console.info("selector: " + handlers[i].selector + ", handler: %O", handlers[i].handler); var $selected = $current.find(handlers[i].selector); console.info("selected %d children:", $selected.length); for (var j = 0; j < $selected.length; j++) { console.info(">> %o", $selected[j]); } } else { console.info("handler: %O", handlers[i].handler); } } } $current = $current.parent(); } } /** * Вариант использования с xpath (для удобства при работе в хроме). * @param xpath */ function dumpEventsX(xpath) { var $object = $(document).xpath(xpath); dumpEvents($object); } /** * Выводит live-обработчики, глобально привязанные к объекту document. */ function dumpDocumentEvents() { dumpEvents($(document)); } |
Для работы dumpEventsX() необходимо наличие плагина jQuery.XPath. XPath я использовал для того, чтобы из панели Elements в хроме правой кнопкой можно было делать Copy XPath и потом в консоли вставлять этот xpath в качестве аргумента функции dumpEventsX().
Честно говоря, я глубоко не разбирался в том, как реализована подписка обработчиков с помощью jQuery, и есть ли другие варианты, которые работают иначе. Вроде бы, bind() и click() делают то же самое, только с конечным объектом (селектор у хендлера будет пустой, и на потомков хендлер уже не будет работать).
Параллельно с тем, как я ковырялся в этих зарослях, нашёл несколько плагинов, делающих примерно то же самое.
Для Сhrome
jQuery Debugger – в Elements появляются вкладки jQuery Data и jQuery Events для каждого DOM-элемента можно посмотреть, что к нему джикверивского привязано, очень удобное расширение
Вот как это выглядит:
Visual Event – очень красивый плагин, при нажатии на кнопку показывает все элементы с привязанными к ним событиями и кодом их обработчиков. Поддерживает события jQuery.
Event Spy – тоже полезная штука, но этот плагин, судя по всему, умеет работать только с непосредственно привязанными обработчиками. Код обработчиков тоже выводится, довольно удобно.
Для FireFox
FireQuery– аддон к FireBug, показывает данные, привязанные к DOM-элементам (правда, не очень удобная навигация) – полезный аддон
EventBug – тоже аддон к FireBug, добавляет вкладку Events к броузеру DOM-элементов
Visual Event – то же самое, что и в хроме, только для FireFox он выполнен в виде bookmarklet, то есть ссылки, которую нужно добавить в закладки, и нажимать когда работаешь со страницей. Наверное, и в Опере работает.
0