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

148

Предположим, у меня есть ссылка на моей странице:

<a href="#" id="foo">Click Here</a>

Я ничего не знаю, но когда я нажимаю на ссылку, alert("bar")отображается. Так что я знаю, что где-то код связан с #foo.

Как я могу найти код, который связывает alert("bar")событие click? Я ищу решение с Chrome.

Ps .: Пример вымышленный, поэтому я не ищу решение типа: «Используйте XXXXXX и ищите весь проект по« alert (\ »bar \») ». Я хочу реальное решение для отладки / трассировки.

FMaz008
источник

Ответы:

140

Использование Chrome 15.0.865.0 dev . На панели «Элементы» есть раздел «Прослушиватели событий»:

введите описание изображения здесь

И «Точки останова слушателей событий» на панели «Сценарии». Используйте точку останова Mouse -> click, а затем «переходите к следующему вызову функции», следя за стеком вызовов, чтобы увидеть, какая пользовательская функция обрабатывает событие. В идеале, вы бы заменить уменьшенную версию JQuery с unminified один , так что вы не должны шагом все время, а также использовать перешагнуть , если это возможно.

введите описание изображения здесь

Ionuț G. Stan
источник
10
Подходя ближе, но большинство результатов там указывают на строку 16 из ... jquery.min.js :( (я понимаю, почему, объяснять не нужно, но как мы можем найти, кто вызвал метод bind () jQuery?
FMaz008
Эти инструменты также доступны в Chrome 12.0.742.100. :) Спасибо !
FMaz008
13
@ Флаффи: Вам не нужно. Просто нажмите на { }символ в левом нижнем углу при просмотре JS. Магия.
Ханнес Шнайдермайер
Переход по сложному коду диспетчеризации событий jQuery - большая боль. Ответ JQuery Audit ниже ( stackoverflow.com/a/30487583/24267 ) намного лучше.
mhenry1384
3
Чтобы исключить jquery из стека вызовов, добавьте в черный ящик скрипт: developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan, или моды, можете ли вы обновить ответ ссылкой на черный ящик - кажется, это распространенный вопрос отношение к этому ответу.
Крис Хайнс
47

Вы также можете использовать инспектор Chrome для поиска прикрепленных событий другим способом, как показано ниже:

  1. Щелкните правой кнопкой мыши на элементе для проверки или найдите его на панели «Элементы».
  2. Затем на вкладке / панели «Прослушиватели событий» разверните событие (например, «нажмите»)
  3. Разверните различные подузлы, чтобы найти нужный вам, а затем найдите, где находится подузел «обработчик».
  4. Щелкните правой кнопкой мыши слово «функция», а затем нажмите «Показать определение функции»

Это приведет вас туда, где был определен обработчик, как показано на следующем рисунке и объяснено Полом Айришем здесь: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

«Показать определение функции»

Мэтти Дж
источник
два года, и до сих пор лучший ответ на этот вопрос.
Стюарт
16

Попробуйте установить расширение jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), после установки выполните следующие действия:

  1. Осмотрите элемент
  2. На новой вкладке « Аудит jQuery » разверните свойство «События».
  3. Выберите для нужного вам мероприятия
  4. В свойстве обработчика щелкните правой кнопкой мыши функцию и выберите « Показать определение функции ».
  5. Теперь вы увидите код привязки события
  6. Нажмите на кнопку « Довольно распечатать » для более удобного просмотра кода.
Хавьер Армендарис
источник
1
Это отличное расширение, которое экономит время, отсеивая JavaScript.
Нил Монро
Я часто нахожу, что в «Прослушивателях событий» перечислены «Нет прослушивателей событий», а выбор «Точки останова прослушивателя событий»> Мышь> Щелчок не создает точку останова. Этот плагин работает очень хорошо.
StuartN
@Javier> это отличный ответ. Работает ли это для механизма JavaScript (не JQuery)?
Мафефа
11

(Последняя версия от 2020 г.) Для версии Chrome версии 83.0.4103.61 :

Инструменты разработчика Chrome - прослушиватель событий

  1. Выберите элемент, который вы хотите проверить

  2. Выберите вкладку «Прослушиватели событий».

  3. Не забудьте проверить слушатели Framework, чтобы показать реальный файл javascript вместо функции jquery.

lovelyramos
источник
6

Редактировать : вместо моего собственного ответа, этот довольно отличный: Как отлаживать привязки событий JavaScript / jQuery с помощью Firebug (или аналогичного инструмента)

Инструменты разработчика Google Chromes имеют функцию поиска, встроенную в раздел скриптов

Если вы не знакомы с этим инструментом: (на всякий случай)

  • щелкните правой кнопкой мыши в любом месте страницы (в Chrome)
  • нажмите «Проверить элемент»
  • нажмите вкладку «Сценарии»
  • Панель поиска в правом верхнем углу

Выполнение быстрого поиска #ID должно в конечном итоге привести вас к функции привязки.

Пример: поиск #fooприведет вас к

$('#foo').click(function(){ alert('bar'); })

введите описание изображения здесь

Майкл Джаспер
источник
4
Хорошее начало, но что если у меня 1500 ссылок на #foo, большинство из которых ничего не связывают, или в случае, когда у меня есть несколько идентификаторов #foo во внешних скриптах, которые не запускаются в данном случае?
FMaz008
Отличный вопрос По моему опыту, именно здесь обычно начинается процесс отладки человеком :)
Майкл Джаспер
1
Хе-хе, вы правы, но мой вопрос был также о том, что я должен делать как человек: p
FMaz008
6

Обновление 2018 года - может быть полезно для будущих читателей:

Я не уверен, когда это было впервые введено в Chrome. Но другой (простой) способ сделать это сейчас в Chrome - через консольные команды.

Например: ( в типе консоли Chrome )

getEventListeners($0)

Тогда как $ 0 - это выбранный элемент в DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

введите описание изображения здесь

Крис Холленбек
источник
4

findEventHandlers - плагин jquery, необработанный код находится здесь: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

меры

  1. Вставьте необработанный код непосредственно в консоль Chrome (примечание: должен быть уже загружен jquery)

  2. Используйте следующий вызов функции: findEventHandlers(eventType, selector);
    чтобы найти соответствующий селектор соответствующего обработчика события элемента EventType.

Пример :

findEventHandlers("click", "#clickThis");

Затем, если есть, доступный обработчик событий будет показан ниже, вам нужно развернуть его, чтобы найти обработчик, щелкнуть правой кнопкой мыши по функции и выбрать show function definition

См .: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

unifreak
источник
3

Для Chrome версии 52.0.2743.116:

  1. В Инструментах разработчика Chrome откройте панель «Поиск», нажав Ctrl+ Shift+ F.

  2. Введите имя элемента, который вы пытаетесь найти.

Результаты для связанных элементов должны появиться на панели и указать файл, в котором они находятся.

Призрачное эхо
источник