Найти прикрепленные/связанные события элемента с помощью инструментов разработки Chrome/Firebug/IE

При проверке страницы DOM мне бы хотелось быстро узнать вложенное событие элемента

Например, если кнопка имеет этот HTML DOM

<button id="button1">Click Me</button>

И где-нибудь (не в том месте, которое я знаю заранее), оно имеет прикрепленное событие, например.

$("#button1").click(function(){...});

Я знаю, что это можно сделать программно (Могу ли я найти события, связанные с элементом с jQuery?)

но есть ли способ использовать только один из инструментов разработчика для Chrome/Firefox/IE, чтобы увидеть список событий?


Обновление. Я узнал, что в новых версиях Chrome у меня есть вкладка с именем EventListeners, но, похоже, она не позволяет легко развернуть все до источник события, поскольку jQuery обертывает оригинал

Ответ 1

FireQuery - http://firequery.binaryage.com/ позволяет видеть события, связанные с элементами, и сверлить их

Ответ 2

Чтобы получить первый прикрепленный обработчик первого элемента $( "# button1" )

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

Длинная история, которую никто не хочет слышать: Я пришел сюда, чтобы найти плагин. Я был в восторге от ответа @schmidlop, но в jQuery, который на самом деле не дает мне прослушиватель, который я ищу, он просто показывает общий обработчик событий jQuery, который в конечном итоге вызывает конкретный обратный вызов. Я все еще ищу плагин Chrome, который позволит мне щелкнуть правой кнопкой мыши по элементу и позволить мне просверлить обработчики, прикрепленные к объекту.

Потому что это было бы круто.

UPDATE: Я нашел расширение chrome, называемое jQuery Debugger. Вы просто "Осмотрите элемент" и выберите "События jQuery" из подменю "Элементы"... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi enter image description here

Ответ 3

В Chrome теперь есть вкладка "Слушатели событий". Event Listeners tab

Ответ 4

С помощью инспектора Chrome выберите элемент на вкладке "Элементы", а затем со вкладки "Консоль" вы увидите события, прикрепленные к элементу, с помощью getEventListeners($0);.

Ответ 5

В инструментах разработчика Firefox теперь отображается "ev" рядом с элементами, которые имеют связанные события. Это можно использовать для проверки связанных событий (включая события jQuery).

Вот пример проверки элемента "Первый абзац" из jQuery click documentation:

Bound events in Firefox developer tools

Ответ 6

Вы также можете проверить наличие виджета Visual Event для хром.