DevTools, каким образом находить обработчики событий js на любом сайте ??

Question

[Максим]

Сам вопрос в заголовке, я раньше считал что я умею пользоваться devtools а оказалось нет , каким образом находить событие js в dev tools
Много посмотрел ссылок и так же видео в youtube но так и не дошло , каким образом ищется обработчик на неизвестном сайте

Answer 1

[Михаил]

3 пункт

Comments

[Максим]

Михаил , вот к примеру toster , сжимаем браузер и тыкаем на кубик ... не фига не происходит

[Михаил]

. Shadow: не очень понял про кубик и что должно было произойти. Вот например находим обработчик на показ dropdown. https://gyazo.com/03f10aad3e87396b6d29f91c8f95500f Здесь [0] - используется потому, что подключен Jquery. И такакая выборка возьмет все элементы, а не только первый, как в преведенной статье

[Максим]

Михаил: а что из всего этого обработчик ? https://cloud.mail.ru/public/EH5k/9c3LQbVop

[Михаил]

. Shadow: ничего, объект пустой, значит обработчиков нет. У вас селектор даже не верный, если просто набрать его в консоле $('navbar_toggle') вернется пустой массив (элемент не найден). Если это класс, должно быть .navbar_toggle

Answer 2

[Rou1997]

Обработчик событий DOM-элемента ищется на вкладке "Elements" выбором элемента, при этом справа в "Event Listeners" отображаются все обработчики, для не DOM-элементов (window и др.) можно использовать рефлексию в консоли.
Чтобы работать с JavaScript, нужно еще зайти во вкладку "Sources" найти нужный скрипт среди загруженных и нажать кнопку "{}", эта кнопка де-минимизирует скрипт, он станет читабельным, в нем можно будет ставить точки останова, а также в "Event Listeners" появятся номера строк.

Comments

[Максим]

ну к примеру а как увидеть типа $("всякая фигня").click(....) ; вот такое как находить ??

[Rou1997]

. Shadow: Первый способ - через "Event Listeners", второй - просто поиском по коду скрипта.