Czas na kolejną funkcję DevToolsów, o której zawsze wiedziałem, że jest, ale nigdy jej nie użyłem, czyli Event Listeners.
Prosty przykład
Zakładka event listeners, jak nietrudno się domyślić, pozwala na przeglądanie javascriptowych eventów zbindowanych do danego elementu.
Zacznijmy klasycznie od prostego przypadku. Przygotowałem w tym celu mały przykład:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Event handlers demo</title> | |
| <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div class="wrapper" style="width:300px;height:300px;background:red;"> | |
| <button>Click me</button> | |
| </div> | |
| <script> | |
| (function() { | |
| $('.wrapper').click(function wrapperHandler() { | |
| console.log('wrapper'); | |
| }); | |
| $('button').click(function buttonHandler() { | |
| console.log('button'); | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Po otwarciu zakładki Event Listeners dla wrappera widzimy event handler dodany przez mój kod:
Zobaczmy teraz co zostanie wyświetlone dla elementu button:
Co tu się odjaniepawliło? Skąd listener wrappera w listenerach buttona? Okazuje się, że Chrome domyślnie pokazuje listenery nie tylko dla wybranego elementu, ale również dla jego przodków w drzewie. Odzaczenie checkboxa Ancestors spowoduje odfiltrowanie listenerów przodków.
Czas pobrudzić sobie ręce
Wszystko wydaje się proste, a jednak przy próbie podejrzenia event listenerów dla prostego guzika w Emberowej aplikacji zastałem następujący widok:
Dziwne, skąd tyle listenerów zbindowanych do prostego przycisku? Ok, zobaczmy co stanie się po odznaczeniu Ancestors:
Odznaczenie opcji Ancestors ograniczyło nieco liczbę listenerów, jednak wciąż jest ona dość duża jak na przycisk. Tutaj z pomocą przychodzi checkbox Framework Listeners. Po odznaczeniu tej opcji odfiltrowane zostały listenery dodane przez bibliotekę Ember.js, dzięki czemu w końcu znalazłem konkretny listener zbindowany przez mój własny kod do przycisku.
Event listener breakpoints
Ok, fajnie, wiem już, że do mojego przycisku przypisany jest event handler. Spróbujmy teraz wykorzystać Event listener breakpoints w zakładce Sources aby sprawdzić handler w akcji. Na rozwijanej liście zaznaczamy mouse -> click, dzięki czemu kliknięcie w dowolny element ze zdefiniowanym handlerem dla eventu click spowoduje wstrzymanie wykonania kodu.
Zgodnie z oczekiwaniami kliknięcie w przycisk spowodowało odpalenie debuggera. Kod zatrzymał się jednak w niezbyt interesującym miejscu – we wrapperze dodanym przez zewnętrzną bibliotekę (new relic). Można sobie z tym poradzić poprzez kliknięcie prawym przyciskiem w oknie debuggera i wybranie opcji Blackbox script.
Po dodaniu odpowiednich wpisów do listy blackboxed scripts i ponownym kliknięciu w guzik debugger odpalił się już w miejscu, które mnie interesowało:
Monitorowanie zdarzeń
W przypadku, gdy nie interesuje nas jak zostało obsłużone pewne zdarzenie, a jedynie czas jego wywołania przydatna może okazać się funkcja monitorEvents. W inspectorze należy zaznaczyć interesujacy element, a następnie wpisać:
monitorEvents($0)
każde zdarzenie, które wystąpi dla zaznaczonego elementu zostanie zalogowane w konsoli:
Monitorowanie można ograniczyć też do konkretnych eventów, podając nazwę zdarzenia w drugim parametrze funkcji:
monitorEvents($0, ‚click’)
Monitorowanie można zakończyć używając polecenia:
unmonitorEvents($0)
Bonus
Jeśli korzystamy z biblioteki jQuery, to szczegóły event handlerów dla aktualnie wybranego elementu możemy podejrzeć wpisując
$._data(($0), ‚events’)
Czasami ten sposób może okazać się szybszy niż przekopywanie się przez zakładkę Event listeners.
Podsumowanie
W tym poście zaprezentowałem kilka sposobów na analizę zdarzeń za pomocą Chrome DevTools. Dowiedzieliśmy się, jak przeglądać listę event listenerów, ustawiać automatyczne breakpointy dla event listenerów oraz jak włączyć logowanie zdarzeń dla elementów drzewa.
W kolejnym poście serii przeanalizuję temat DOM breakpoints.
My code works. I know why. 
Jedna myśl na temat “Chrome DevTools część 2 – Event Listeners”