Я використовую Chrome та власний веб-сайт.

Що я знаю зсередини:

1 ) У мене є форма, в якій люди підписуються, натискаючи цю помаранчеву кнопку зображення:

2 ) Я перевіряю це, і це все: <img class="formSend" src="images/botoninscribirse2.png">

3 ) У верхній частині вихідного коду є тони сценаріїв. Я знаю, на яку кнопку дзвонить, бо я її закодував:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) У цьому файлі ви зможете знайти: $(".formSend").click(function() { ... });що саме запускається кнопкою (щоб зробити досить складну перевірку форми та подати), і що я хочу, щоб можна було знайти це за допомогою інструментів хромованого розробника на будь-якому веб-сайті.

Як я можу дізнатися, куди дзвонить елемент?

Вкладка слухачів не працювала для мене. Тоді я спробував шукати слухачів подій клацання, що для мене здавалося надійною ставкою, але ... там немає jquery2.js(і я б не знав, який файл є кодом, тому я б марнував час на перевірку всіх цих питань .. .):

Моєї $(".formSend").click(function() { ... });функції у jquery2.jsфайлі немає.

Джессі пояснює, чому :

"Нарешті, причина, через яку ваша функція не пов'язана безпосередньо з обробником подій клацання, полягає в тому, що jQuery повертає функцію, яка зв'язана. Функція jQuery, у свою чергу, проходить через деякі шари абстракції та перевіряє, а десь там вона виконує вашу функцію . "

Як запропонували деякі з вас, я зібрав методи, які працювали в одній відповіді нижче .

Відповідь Олександра Павлова наближається до того, що ви хочете.

Через велику абстракцію jQuery та функціональність, для того, щоб потрапити на м'ясо події, потрібно стрибнути багато обручів. Я створив цей jsFiddle для демонстрації твору.

1. Встановлення точки перерви слухача подій

Ви були близькими на цьому.

1. Відкрийте Chrome Dev Tools (F12) та перейдіть на вкладку "Джерела".
2. Перехід до миші -> Клацніть (натисніть, щоб збільшити)
   
   

2. Натисніть кнопку!

Інструменти Chrome Dev призупиняють виконання сценарію та представлять вам це прекрасне переплетення мінімізованого коду:

(натисніть для збільшення)

3. Знайдіть славний код!

Тепер, фокус у тому, щоб не захоплюватися натисканням клавіші, а слідкувати за екраном.

1. Натискайте F11клавішу (крок), поки не з’явиться бажаний вихідний код
2. Вихідний код нарешті досяг
   • У наведеному вище зразку jsFiddle я повинен був натиснути F11 108 разів, перш ніж досягти потрібного обробника події / функції
   • Ваш пробіг може змінюватися в залежності від версії jQuery (або рамкової бібліотеки), що використовується для прив'язки подій
   • З достатньою віддачею та часом ви можете знайти будь-якого обробника подій / функцій

4. Пояснення

Я не маю точної відповіді чи пояснення, чому jQuery проходить через багато шарів абстракцій, які він робить - все, що я можу припустити, - це через те, що робота, яку він робить, абстрагує своє використання від браузера, виконуючи код. .

Ось jsFiddle з налагодженою версією jQuery (тобто не мінімізована). Якщо ви подивитеся на код на першій (не зміненій) точці розриву, ви побачите, що код обробляє багато речей:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

Я вважаю, що ви пропустили цю спробу, коли " виконання пауз, і я стрибаю рядок за рядком ", - це те, що ви, можливо, використовували функцію "Крок понад" замість кроку. Ось відповідь StackOverflow, що пояснює відмінності.

Нарешті, причина, чому ваша функція не пов'язана безпосередньо з обробником подій клацання, полягає в тому, що jQuery повертає функцію, яка зв'язана. Функція jQuery в свою чергу проходить через деякі шари абстракції та перевіряє, а десь там вона виконує вашу функцію.

Рішення 1: Рамковий blackboxing

Відмінно працює, мінімально налаштовується і не має сторонніх сторін.

Відповідно до документації Chrome :

Що станеться, коли ви в чорний сценарій скрипт?

Винятки, викинуті з коду бібліотеки , не призупиняться (якщо параметр "Пауза на винятки" увімкнено), перехід / вимкнення / перехід обходить код бібліотеки, точки проходу слухача подій не порушуються в коді бібліотеки, налагоджувач не зупиняється на будь-яких точках перерви, встановлених у бібліотеці код. Кінцевий результат - ви налагоджуєте код програми замість сторонніх ресурсів.

1. Відкрийте Інструменти для розробників Chrome ( F12або ⌘+ ⌥+ i), перейдіть до налаштувань (у верхньому правому куті або F1). Знайдіть вкладку зліва під назвою " Blackboxing "

2. Тут ви ставите шаблон RegEx файлів, які ви хочете, щоб Chrome ігнорував під час налагодження. Наприклад: jquery\..*\.js(Глоб шаблон / людина переклад: jquery.*.js)
3. Якщо ви хочете пропустити файли з декількома шаблонами, ви можете додати їх за допомогою символу труби |, як-от так: jquery\..*\.js|include\.postload\.js(який, наприклад, діє як "або цей шаблон". Або продовжуйте додавати їх кнопкою "Додати".
4. Тепер продовжуйте рішення, описане нижче.

Бонусна порада! Я регулярно використовую Regex101 (але є багато інших :), щоб швидко перевірити свої іржаві шаблони регулярних регексів і з'ясувати, де я помиляюся з покроковою відладкою regex. Якщо ви ще не володієте "регулярними виразами", рекомендую почати використовувати сайти, які допомагають писати та візуалізувати їх, наприклад http://buildregex.com/ та https://www.debuggex.com/

Ви також можете використовувати контекстне меню під час роботи на панелі "Джерела". Переглядаючи файл, ви можете натиснути правою кнопкою миші редактор і вибрати сценарій Blackbox Script. Це додасть файл до списку на панелі налаштувань:

Рішення 2: Візуальна подія

Це прекрасний інструмент :

Visual Event - це закладка Javascript з відкритим кодом, яка забезпечує налагоджувальну інформацію про події, приєднані до елементів DOM. Візуальні покази подій:

• До яких елементів приєднані події
• Тип подій, приєднаних до елемента
• Код, який буде запущений із подією, запускається
• Вихідний файл та номер рядка, де визначена додана функція (веб-браузери та лише Opera)

Рішення 3: Налагодження

Ви можете призупинити код, натиснувши десь на сторінці або коли DOM буде змінено ... та інші види точок прориву JS, які будуть корисні знати. Тут слід застосувати blackboxing, щоб уникнути кошмару.

У цьому випадку я хочу знати, що саме відбувається, коли натискаю кнопку.

1. Відкрийте інструменти Dev -> вкладка Джерела та праворуч знайдіть Event Listener Breakpoints:

   

2. Розгорніть Mouseі виберітьclick

3. Тепер натисніть на елемент (виконання повинно призупинитися), і ви зараз налагоджуєте код. Ви можете пройти весь натискання коду F11(це крок ). Або повернутися кілька стрибків у стеку. Тут може бути тонна стрибків

Рішення 4: Ключові слова для риболовлі

Якщо активовано інструменти Dev, ви можете шукати всю базу коду (увесь код у всіх файлах) за допомогою ⌘+ ⌥+ Fабо:

і пошук, #envioабо тег / клас / ідентифікатор, на вашу думку, розпочинає вечірку, і ви можете кудись потрапити швидше, ніж очікувалося.

Будьте в курсі, що тут є не тільки imgбагато елементів, а багато елементів, і ви можете не знати, який з них запускає код.

Якщо це трохи не в курсі ваших знань, подивіться підручник Chrome щодо налагодження .

Звучить, як "... і я стрибаю рядок за рядком ..." неправильно. Ви StepOver чи StepIn і впевнені, що випадково не пропустите відповідний дзвінок?

Однак, налагодження фреймворків може бути втомливим саме з цієї причини. Щоб полегшити проблему, можна включити експеримент "Увімкнути підтримку налагодження фреймворків" . Щасливого налагодження! :)

Ви можете використовувати findHandlersJS

Ви можете знайти обробника, виконавши в хромованій консолі:

findEventHandlers("click", "img.envio")

Ви отримаєте таку інформацію, надруковану на хромовій консолі:

• елемент
  Фактичний елемент, в якому зареєстрований обробник подій
• події
  Масив з інформацією про обробників JQuery подій для даного типу подій , які ми зацікавлені в (наприклад , клацання, зміна і т.д.)
• обробник
  Метод обробника фактичних подій, який ви можете побачити, клацнувши правою кнопкою миші та вибравши Показати визначення функції
• селектор
  Селектор надав делеговані події. Він буде порожнім для прямих подій.
• 
  Список цілей з елементами, на які спрямований цей обробник подій. Наприклад, для делегованого обробника подій, який зареєстрований у об’єкті документа та спрямований на всі кнопки сторінки, ця властивість відображатиме всі кнопки на сторінці. Ви можете навести на них курсор і побачити їх виділеними хромом.

Більше інформації тут, і ви можете спробувати його на цьому прикладі сайту тут .

Для цього рішення потрібен метод даних jQuery .

1. Відкрийте консоль Chrome (хоча будь-який браузер із завантаженою програмою jQuery працюватиме)
2. Біжи $._data($(".example").get(0), "events")
3. Прокрутіть вихід, щоб знайти потрібний обробник подій.
4. Клацніть правою кнопкою миші на "обробник" та виберіть "Показати визначення функції"
5. Код буде показано на вкладці Джерела

$._data()просто отримує доступ до методу даних jQuery. Більш читаною може бути альтернатива jQuery._data().

Цікавий момент цієї відповіді :

Станом на jQuery 1.8, дані про подію більше не доступні в "загальнодоступному API" для даних. Прочитайте цю публікацію в блозі jQuery . Тепер ви повинні використовувати це замість:

jQuery._data( elem, "events" ); elem повинен бути HTML-елементом, а не об'єктом jQuery чи селектором.

Зауважте, що це внутрішня, "приватна" структура, і її не слід змінювати. Використовуйте це лише для налагодження.

У старих версіях jQuery, можливо, доведеться використовувати старий метод, який є:

jQuery( elem ).data( "events" );

Версія agnostic jQuery буде: (jQuery._data || jQuery.data)(elem, 'events');