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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Это приведет вас туда, где был определен обработчик, как показано на следующем рисунке и объяснено Полом Ирришем здесь:

Answer 3

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

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

Answer 4

Для версии Версия Chrome 71.0.3578.98 (последняя версия на 2019 год):

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

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

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

Answer 5

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

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

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

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

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

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

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

Answer 6

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

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

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

getEventListeners($0)

Принимая во внимание, что $ 0 является выбранным элементом в DOM.

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

Answer 7

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

Шаги

1. Вставьте необработанный код непосредственно в Chromeconsole (примечание: уже должен быть загружен 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/

Answer 8

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

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

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

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