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

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

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

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

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

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

Ответы

Ответ 1

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

enter image description here

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

enter image description here

Ответ 2

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

  • Щелкните правой кнопкой мыши элемент, который нужно проверить, или найдите его на панели "Элементы".
  • Затем на вкладке/панели "Слушатели событий" разверните событие (например, 'click')
  • Разверните различные узлы, чтобы найти нужную, а затем найдите, где находится подпрограмма <обработчик > node.
  • Щелкните правой кнопкой мыши слово "функция", а затем нажмите "Показать определение функции"

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

'Show Function definition'

Ответ 3

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

  • Осмотреть элемент
  • На новой вкладке "jQuery Audit" раскройте свойство Events
  • Выберите подходящее событие.
  • Из свойства обработчика щелкните правой кнопкой мыши по функции и выберите "Показать определение функции"
  • Теперь вы увидите код привязки к событию
  • Нажмите кнопку "Pretty print" для более читаемого представления кода.

Ответ 4

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

Chrome Developer Tools - Event Listener

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

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

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

Ответ 5

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

В инструментах разработчика Google Chromes есть функция поиска, встроенная в раздел сценариев

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

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

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

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

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

enter image description here

Ответ 6

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

Шаги

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

Ответ 7

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

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

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

getEventListeners($0)

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

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

enter image description here

Ответ 8

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

  • В Chrome Developer Tools запустите панель "Поиск", нажав Ctrl + Shift + F.

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

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