Предположим, у меня есть ссылка на моей странице:
<a href="#" id="foo">Click Here</a>
Я ничего не знаю, но когда я нажимаю на ссылку, alert("bar")
отображается. Так что я знаю, что где-то код связан с #foo
.
Как я могу найти код, который связывает alert("bar")
событие click? Я ищу решение с Chrome.
Ps .: Пример вымышленный, поэтому я не ищу решение типа: «Используйте XXXXXX и ищите весь проект по« alert (\ »bar \») ». Я хочу реальное решение для отладки / трассировки.
{ }
символ в левом нижнем углу при просмотре JS. Магия.Вы также можете использовать инспектор 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 :
Выберите элемент, который вы хотите проверить
Выберите вкладку «Прослушиватели событий».
Не забудьте проверить слушатели Framework, чтобы показать реальный файл javascript вместо функции jquery.
источник
Редактировать : вместо моего собственного ответа, этот довольно отличный: Как отлаживать привязки событий JavaScript / jQuery с помощью Firebug (или аналогичного инструмента)
Инструменты разработчика Google Chromes имеют функцию поиска, встроенную в раздел скриптов
Если вы не знакомы с этим инструментом: (на всякий случай)
Выполнение быстрого поиска #ID должно в конечном итоге привести вас к функции привязки.
Пример: поиск
#foo
приведет вас кисточник
Обновление 2018 года - может быть полезно для будущих читателей:
Я не уверен, когда это было впервые введено в Chrome. Но другой (простой) способ сделать это сейчас в Chrome - через консольные команды.
Например: ( в типе консоли Chrome )
Тогда как $ 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.
Пример :
Затем, если есть, доступный обработчик событий будет показан ниже, вам нужно развернуть его, чтобы найти обработчик, щелкнуть правой кнопкой мыши по функции и выбрать
show function definition
См .: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
источник
Для Chrome версии 52.0.2743.116:
В Инструментах разработчика Chrome откройте панель «Поиск», нажав
Ctrl
+Shift
+F
.Введите имя элемента, который вы пытаетесь найти.
Результаты для связанных элементов должны появиться на панели и указать файл, в котором они находятся.
источник