Осмотреть элемент для проверки привязок событий jQuery

Гипотетическая: я нахожу страницу с кнопкой ('#bigButton'), которая при нажатии вызывает llama ('img # theLlama') для показа() с помощью jQuery.

Итак, где-нибудь (например, строка 76) в buttons.js:

$('#bigButton').click(function(){
$('img#theLlama').show();
})

Теперь, скажем, у меня есть большая HTML-страница со всей связью .js файлов. Я могу нажать на кнопку и увидеть ламу, но я понятия не имею, где находится код выше.

Решение, которое я ищу, очень похоже на то, что доступно с CSS в Firebug. Я хочу проверить элемент и показать ему, что этот jQuery встречается в строке 76 кнопок .js вместе с любыми другими привязками к этому элементу.

* Примечание: щедрость предназначена для конкретного ответа на вопрос "ламы", т.е. указывая на решение, описанное выше. *

FireQuery - отличный инструмент для многих задач jQuery, но, похоже, он не отвечает на вопрос ламы. Если я ошибаюсь в этом, пожалуйста, поправьте меня.

Ответ 1

Использование Firebug, FireQuery и эта скрипка:

Удар Cmd + Shift + C (Inspect Element) и нажатие кнопки показывает это:

Нажатие на события Object {click= } показывает это (после расширения некоторой информации)

И нажатие на function() показывает это:

Каким должен быть код, который вы ищете, правильно?

В качестве примечания, Firebug не всегда может найти точную строку кода, из которой что-то произошло. У меня этот метод не прошел полностью! Другим подходом является использование названных функциональных выражений. Изменение кода на:

$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})

Теперь показывает это при проверке объекта events:

Это более полезно, чем просто function(), поскольку теперь очевидно, что этот обработчик показывает нам ламу. Вы также можете найти код для имени функции и найти его!

Используя Chrome, его встроенный веб-инспектор и эта скрипка:

Удар Cmd + Shift + C (Inspect Element) и нажатие на кнопку показывает это:

Нажав кнопку в инспекторе элементов, нажмите "Escape", чтобы открыть консоль JS:

В консоли Chrome $0 ссылается на выбранный элемент на панели элементов.

Ввод в $._data( $0 ) даст нам объект данных jQuery (внутренний), который включает события, как, например, в нашем примере Firebug, к сожалению, Chrome не позволит нам щелкнуть по функции, но это позволит нам увидеть источник:

<Broken Screenshot link>

Заметка о `.live()` события:

Live Events хранятся на $._data( document, "events" ) и содержат origHandler, который указывает на функцию:

<Broken Screenshot link>

Ответ 2

Учитывая интерфейс, который вам нужен, я думаю, вам понадобится FireQuery: http://firequery.binaryage.com/

Это аддон Firebug специально для таких областей (специальный аддон jQuery, сильный в данных/событиях).

Ответ 3

FireQuery является наиболее удобным, но если вам нужно сделать это вручную, вы можете получить ссылку на функцию обработки кликов с помощью $(element).data('events').click[0].handler (конечно, это не обязательно 0, если есть несколько обработчиков кликов). Оттуда ваш любимый отладчик должен найти эту функцию в коде. (Использование названных функций помогает. Firebug может иногда находить анонимные функции, но чаще всего нет. Он покажет тело функции, хотя, если вы наведете над ним мышью.)

Обновить, так как данные отображаются с помощью FireQuery:

HTML-представление:

Приставки:

Ответ 4

Well eventbug покажет вам все обработчики событий для элемента, http://getfirebug.com/releases/eventbug но часто обработчик - это некоторый общий код.