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

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

Click Here 

Я ничего не знаю, но когда я нажимаю на ссылку, отображается предупреждение («bar»). Поэтому я знаю, что где-то, некоторый код получает привязку к #foo.

Как я могу найти код, который привязывает предупреждение («бар») к событию клика? Я ищу решение с Chrome.

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

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

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

И «Контрольные точки слушателей событий» на панели «Сценарии». Используйте мышь -> точка останова клика, а затем «входите в следующий вызов функции», одновременно следя за стеком вызовов, чтобы узнать, какая функция userland обрабатывает событие. В идеальном случае вы замените мини-версию jQuery на unminific, чтобы вам не приходилось постоянно ступать , и использовать шаг по мере возможности.

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

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

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

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

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

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

  1. Осмотреть элемент
  2. На новой вкладке « jQuery Audit » расширьте свойство Events
  3. Выберите событие, которое вам нужно
  4. Из свойства handler щелкните правой кнопкой мыши по функции и выберите « Показать функцию определения »
  5. Теперь вы увидите код привязки Event
  6. Нажмите кнопку « Довольно печатать » для более удобного просмотра кода

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

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

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

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

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

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

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

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

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

меры

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

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

Пример :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 getEventListeners($0) 

В то время как $ 0 является выбранным элементом в DOM.

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

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

Давайте будем гением компьютера.