Використовуючи Chrome, як знайти, до яких подій пов'язаний елемент

Припустимо, я маю посилання на своїй сторінці:

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

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

Як я можу знайти код, який прив'язує alert("bar")до події клацання? Я шукаю рішення з Chrome.

Пс .: Приклад вигаданий, тому я не шукаю такого рішення, як: "Використовуйте XXXXXX і шукайте весь проект для" попередження (\ "бар \") ". Я хочу справжнє рішення налагодження / відстеження.

Використання Chrome 15.0.865.0 dev . На панелі «Елементи» є розділ «Слухачі подій»:

І "Точки зупинки слухачів подій" на панелі "Сценарії". Скористайтеся мишею -> точка перерви клацання, а потім "перейдіть до наступного виклику функції", при цьому стежте за стеком викликів, щоб побачити, яка функція "userland" обробляє подію. В ідеалі ви замінили б мінімізовану версію jQuery на немініфіковану, щоб вам не довелося постійно переступати та використовувати крок, коли це можливо.

Ви також можете скористатися інспектором Chrome, щоб знайти вкладені події іншим способом:

1. Клацніть правою кнопкою миші елемент, щоб перевірити, або знайдіть його на панелі «Елементи».
2. Потім на вкладці / панелі "Слухачі подій" розгорніть подію (наприклад, "натисніть")
3. Розгорніть різні підвузли, щоб знайти потрібний, а потім знайдіть, де знаходиться підвузл «обробник».
4. Клацніть правою кнопкою миші слово "функція", а потім натисніть "Показати визначення функції"

Це переведе вас до місця, де було визначено обробник, як показано на наступному зображенні та пояснено Полом Ірландським тут: 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. У властивості обробника клацніть правою кнопкою миші функцію та виберіть " Показати визначення функції "
5. Тепер ви побачите код прив'язки події
6. Клацніть на кнопку « Гарненький друк », щоб побачити більше коду

(Остання з 2020 року) Для версії Chrome версії 83.0.4103.61 :

1. Виберіть елемент, який ви хочете оглянути

2. Виберіть вкладку Слухачі подій

3. Не забудьте перевірити слухачів Framework, щоб показати справжній файл JavaScript замість функції jquery.

Редагувати : замість моєї власної відповіді, ця є досить відмінною: як налагодити прив'язки подій JavaScript / jQuery за допомогою Firebug (або подібного інструменту)

Інструменти для розробників Google Chromes мають функцію пошуку, вбудовану в розділ сценаріїв

Якщо ви не знайомі з цим інструментом: (про всяк випадок)

• клацніть правою кнопкою миші будь-де на сторінці (в хромі)
• натисніть "Перевірити елемент"
• натисніть вкладку "Сценарії"
• Рядок пошуку вгорі праворуч

Швидкий пошук #ID з часом повинен привести вас до функції прив’язки.

Напр .: пошук шукає #fooвас

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

Оновлення 2018 року - може бути корисним для майбутніх читачів:

Я не впевнений, коли це було спочатку внесено в 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

Кроки

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

Для версії Chrome 52.0.2743.116:

1. У Інструментах для розробників Chrome виберіть панель "Пошук", натиснувши Ctrl+ Shift+ F.

2. Введіть ім'я елемента, який ви намагаєтесь знайти.

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