[kontra]

#webdev #javascript #jquery

Jest jakiś dobry i prosty plugin dla #chrome do szybkiego sprawdzania jakie event handlery są zapięte na elementy na stronie, żeby od razu też pokazywały fragment kodu, który jest do tego podpięty? Visual Event potrafi być nieczytelny, jQuery Events i jQuery Audit strasznie oporne :c

[Marmite]

@kontra: Chrome ma to wbudowane od razu. Z tym że w przypadku eventów jQuery oczywiście nie pokaże faktycznego handlera, a funkcję jQuery która go wykona.

[G.....n]

@Marmite: Pewien z tym ostatnim? AFAIR ostatnio debugowałem coś i od razu znajdowało prawidłową funkcję.

[kontra]

@Marmite: zakładka "Event Listeners"? Moim zdaniem nieprzejrzysta i mało użyteczna. No i tak jak mówisz, funkcja zawsze jest w piątej linijce jquery.js ;)
@Ginden: jw

[Marmite]

@Ginden: Prawie pewien, bo pamiętam że debuggowałem i pokazywało mi ten handler jquery'owy. Chyba że pod jakimiś specjalnymi warunkami Chrome potrafi to ogarnąć, np. ustawienie blackboxa albo używanie jQuery z CDN.

[kontra]

@Marmite: świetnie to jest rozwiązane w Firefoksie - w przeglądarce źródła przy każdym elemencie jest ikonka "Ev", po naciśnięciu na którą pokazują się zabindowane eventhandlery wraz z odnośnikami do rzeczywistego kodu, który się wykona. Za cos takiego w chromie bym pokroił ( ͡° ʖ̯ ͡°)

[Marmite]

@kontra: Ale FF ogarnia, że kod jest z jQuery i kieruje do rzeczywistego handlera? Ciekawe jak to rozpoznają.

[kontra]

@Marmite: no tak jak widzisz. Eventy do tego elementu ze screena są zapięte normalnie przez $(document).on('change', 'jakistamselektor', function () { ... }); i Firefox pokazuje odniesienie do rzeczywistego miejsca w kodzie. Przeglądasz źródło, klikasz na ikonkę przy interesującym elemencie i masz - super to jest. W Chromie są dodatki, które też to umożliwiają (wspomniane jQuery Events i jQuery Audit), ale są bardzo toporne, bez porównania z tym.