Как отловить событие клика по элементу в инструментах разработчиков?

Question

[Павел]

например есть сайт , у него 100500 тыщь скриптов и еще больше строк кода , есть кнопка , как через "дебаг" отловить ее чтоб узнать какой именно код по кнопке срабатывает?

Comments

[Kovalsky]

Вы избегаете вообще любых самостоятельных действий? Выбираете элемент, справа читаете - "Event Listeners", voi la.

[Павел]

Никита Полевой, на примере этого сайта stilm.rf.gd , справа красная кнопка , по клику открывается модалка с формой, как отследить какой js код отвечает за клик по кнопке ?

[kulaeff]

mrusklon, F12 -> Sources (Сеть) -> Event Listener Breakpoints. Только для красной кнопки не задан click handler и, соответственно, вы не сможете отследить через event listener breakpoins.

[Павел]

kulaeff, а кнопка отправить? В самой форме. Возможно плохой пример подобрал ,
если к примеру есть такой код

$("body").on('click', '[href*="#"]', function (e) {
        var fixed_offset = 0; // отступ сверху
        $('html,body').stop().animate({scrollTop: $(this.hash).offset().top - fixed_offset}, 1000); 
        e.preventDefault();
    });

вроде и клик , но по всем # , найти его не просто , то ли дело клик по id , какая последовательность действий ?

[Kovalsky]

mrusklon, вы прикалываетесь? Вы на тостере больше трёх лет и спрашиваете как работает <input type="submit">? Это дефолтный функционал элемента управления submit.

[Павел]

Никита Полевой, ну может я загоняюсь) я пытаюсь открыть для себя инструменты разработчика более углубленно , но видимо не могу подобрать правильный вопрос.
Просто часто бывают вещи на js которые сложно найти, это отнимает время, думал может есть способ проще находить код через дебаг... on('click', '[href*="#"] вот эту капость искал долго , нужно было на якорь повесить модалку , а e.preventDefault(); срабатывал на якорь . Такие дела...

[Kovalsky]

mrusklon, не понял. То есть вы всё это сами сделали, а потом спросили какие там обработчики, или что?

А и как это связано с элементами которые вы перечислили? Модалка не имеет отношения к JS, она работает через CSS; input[type=button] тоже по дефолту отправляет форму в которой содержится; а как раз то что вы сказали находится через инструменты в секунду - наводите на ссылки, видите что на них висит click обработчик, всё. По адресу справа можно перейти в то место где эта функция описывается.

[Павел]

Никита Полевой, я ведь привел другой пример, а вы все цепляетесь к словам, от вас как-то больше негативом веет чем желанием помочь

[Kovalsky]

mrusklon, ну тут я уже совсем перестал что-либо понимать. Я же вам вроде все примеры разобрал, все три. Обработчики JS там были только в третьем пункте, его тоже разобрал.

"негативом веет" - а как можно по-другому относиться к взрослому человеку который вместо того чтоб пользоваться существующими материалами просит ему показать всё пальчиком? И даже несмотря на этот негатив я все ваши примеры разобрал. Пожалуйста.

И учтите тот факт, что Visual Event поможет вам только в самых простейших случаях, более-менее сложные структура и логика - и вот уже Visual Event указывает не на тот слой или не на тот обработчик, как повезёт.

Answer 1

[Kovalsky]

Мой ответ про список "Event Listeners" в инструментах разработчика остаётся актуален, а в случае с приведённым вами сайтом вам стояло хоть разок глянуть на код. Что получилось у меня: на кнопке #write банально нету обработчиков, а т.к. она открывает модалку, то я посмотрел на код оверлея. У оверлея id="write", уже тут становится понятно что это неспроста. Открываю modal.css и там первой строкой написано "Модальные окна на чистом CSS, без javascript", далее смотрю что же там творится с оверлеем, нахожу такие строки: .overlay:target и .overlay:target+.popup. Открываю MDN, читаю - :target описывает стили которые применяются к элементу, если его ID совпадает с текущим URL хешем. Вывод: единственный способ вызвать модалку это изменить URL страницы, сделать это можно либо с помощью JS, либо с помощью анкор ссылочек, вот таких: <a href="#write">text</a>