Предположим, на моей странице есть ссылка:
<a href="#" id="foo">Click Here</a>
Больше я ничего не знаю, но когда я нажимаю на ссылку, отображается alert("bar"). Итак, я знаю, что где-то какой-то код привязывается к #foo.
Как найти код, связывающий alert("bar") с событием щелчка? Ищу решение с Chrome.
Ps .: Пример вымышленный, поэтому я не ищу решения вроде: «Используйте XXXXXX и ищите по всему проекту« alert (\ "bar \») ». Мне нужно реальное решение для отладки / трассировки.
Используется Chrome 15.0.865.0 dev. На панели «Элементы» есть раздел «Слушатели событий»:
И «Точки останова для прослушивателей событий» на панели «Сценарии». Используйте Мышь -> щелкните точку останова, а затем «перейдите к следующему вызову функции», следя за стеком вызовов, чтобы увидеть, какая функция пользовательского пространства обрабатывает событие. В идеале вы должны заменить минимизированную версию jQuery неминифицированной, чтобы вам не приходилось все время входить и по возможности использовать step over.
{ } в левом нижнем углу при просмотре js. Магия.
- person Hannes Schneidermayer; 19.03.2014
{ }!
- person Howie; 22.01.2016
Вы также можете использовать инспектор Chrome для поиска прикрепленных событий другим способом, как показано ниже:
Это приведет вас туда, где был определен обработчик, как показано на следующем изображении и объяснено Полом Айришем здесь: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
Попробуйте расширение jQuery Audit (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), после установки выполните следующие действия:
(Последняя версия на 2020 г.) Для версии Chrome 83.0.4103.61:
Выберите элемент, который хотите проверить
Выберите вкладку Event Listeners.
Обязательно проверьте прослушиватели Framework, чтобы показать настоящий файл javascript вместо функции jquery.
Изменить: вместо моего собственного ответа этот отличный: Как отлаживать привязки событий JavaScript / jQuery с помощью Firebug (или аналогичного инструмента)
Инструменты разработчика Google Chromes имеют функцию поиска, встроенную в раздел скриптов.
Если вы не знакомы с этим инструментом: (на всякий случай)
Быстрый поиск #ID в конечном итоге приведет вас к функции привязки.
Пример: поиск по запросу #foo приведет вас к
$('#foo').click(function(){ alert('bar'); })
Обновление 2018 г. Может быть полезно для будущих читателей:
Я не уверен, когда это было изначально введено в Chrome. Но еще один (простой) способ сделать это сейчас в Chrome - с помощью консольных команд.
Например: (в типе консоли Chrome)
getEventListeners($0)
В то время как $ 0 - это выбранный элемент в DOM.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlers - это плагин jquery, исходный код находится здесь: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js.
Шаги
Вставьте необработанный код прямо в консоль Chrome (примечание: должен быть уже загружен jquery)
Используйте следующий вызов функции: findEventHandlers(eventType, selector);
, чтобы найти обработчик eventType соответствующего элемента, указанного в селекторе.
Пример:
findEventHandlers("click", "#clickThis");
Затем, если таковой имеется, доступный обработчик событий будет показан ниже, вам нужно развернуть, чтобы найти обработчик, щелкните функцию правой кнопкой мыши и выберите show function definition
См .: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
Для версии Chrome 52.0.2743.116:
В инструментах разработчика Chrome откройте панель «Поиск», нажав _1 _ + _ 2 _ + _ 3_.
Введите имя элемента, который вы пытаетесь найти.
Результаты для связанных элементов должны появиться на панели и указать файл, в котором они находятся.
