Event Listeners przedstawiają każdy element posiadający event listener, pokolorowane według rodzaju — kliknięcie, najechanie kursorem, przewinięcie, dotknięcie, klawiatura i formularz — pokazuje, skąd pochodzi każdy moduł obsługi, i miga elementami w miarę zmian DOM.
Sprawdzanie, dlaczego coś reaguje — lub nie — zwykle zaczyna się od pytania, na które strona nie odpowiada: czy w ogóle istnieje moduł obsługi kliknięć w tym elemencie? Który element faktycznie jest właścicielem zachowania po najechaniu myszką? Co powoduje słuchanie przewijania i zacinanie się strony? Przeglądarki DevTools mogą wyświetlać listę listeners jednego elementu na raz, jeśli już wiesz, który element wybrać.
To narzędzie odpowiada na pytanie dla całej strony jednocześnie. Każdy element ze listener otrzymuje kontur w kolorze swojego rodzaju — kliknij, najedź kursorem, przewiń, dotknij i przeciągnij, użyj klawiatury lub formularza i fokusu — a najechanie kursorem pokazuje dokładne zdarzenia i pochodzenie każdego z nich: atrybut wbudowany, właściwość on-właściwość, moduł obsługi React lub Vue, jQuery lub addEventListener. Kafelki kategorii włączają i wyłączają każdy rodzaj, a lista pod spodem zawiera nazwy każdego elementu, więc jedno kliknięcie powoduje przewinięcie do niego.
Ramy są obsługiwane prawidłowo. React przyłącza swoje listeners do katalogu głównego i wywołuje wewnętrznie zdarzenia, dzięki czemu cała aplikacja wygląda na klikalną; narzędzie odkłada te rejestracje główne na bok i pokazuje procedury obsługi React na elementach, które je deklarują. Szybkie skanowanie nie wymaga ponownego ładowania i obejmuje wbudowane procedury obsługi, React, Vue i jQuery. Listeners dodane za pomocą zwykłego addEventListener przed otwarciem narzędzia są widoczne dopiero od początku ładowania strony, więc Reload & record powoduje jednokrotne przeładowanie strony z włączonym nagrywaniem — narzędzie następnie otwiera się ponownie samodzielnie z każdym dołączonym listener, także na poziomie strony w window i document.
Druga zakładka obserwuje sam DOM. Każdy dodany lub usunięty węzeł, zmiana atrybutu i zmiana tekstu miga na stronie, liczniki pokazują mutacje na sekundę, a lista zawiera ranking elementów, które zmieniają się najbardziej, wraz z atrybutami, których to dotyczy. Stały strumień, podczas którego nikt nie dotyka strony, zwykle oznacza licznik czasu, animację opartą na JavaScript lub framework renderujący więcej niż powinien – dokładnie to, co wyczerpuje baterie i powoduje zacinanie się stron.
Elementy umożliwiające kliknięcie, najechanie, przewinięcie, dotknięcie, klawiaturę i listeners są obrysowane we własnym kolorze, z kafelkami umożliwiającymi pokazanie lub ukrycie każdego rodzaju.
Atrybuty wbudowane, właściwości on-properties, procedury obsługi React i Vue, zdarzenia jQuery i wywołania addEventListener, oznaczone etykietą na każdym elemencie.
listeners na poziomie głównym React są odkładane na bok, a ich procedury obsługi są pokazane na elementach, które je deklarują, a nie na całej aplikacji.
Reload & record przechwytuje każde wywołanie addEventListener od początku ładowania strony, łącznie z listeners window i document, tylko dla tego jednego ładowania.
Dodane i usunięte węzły, zmiany atrybutów i zmiany tekstu migają na stronie wraz z licznikiem mutacji na sekundę.
Rankingowa lista elementów, które zmieniają się najbardziej, wraz z związanymi z nimi atrybutami, wskazuje bezpośrednio na niekontrolowane ponowne renderowanie.
Zobacz na pierwszy rzut oka, czy przycisk rzeczywiście ma listener, czy też procedura obsługi znajduje się zamiast tego na elemencie opakowania.
Znajdź każdy element słuchający przewijania, kółka lub ruchu dotykowego, w tym listeners w window i document.
Sprawdź, które kontrolki reagują na zdarzenia klawiatury, a które tylko na mysz.
Obserwuj licznik mutacji, gdy strona jest bezczynna; elementy, które ciągle się zmieniają, wskazują na timer lub framework wykonujący dodatkową pracę.
Najedź kursorem na nieznaną witrynę, aby zobaczyć, które części są interaktywne i które ramy je łączą.
Kliknij ikonę Event Listeners w doku DevSuite Pro. Szybkie skanowanie uruchamia się natychmiast i przedstawia każdy znaleziony element.
Najedź kursorem na dowolny zaznaczony element, aby zobaczyć związane z nim zdarzenia i ich źródła. Użyj kafelków kategorii, aby wyświetlić tylko listeners kliknięcia, najechania myszką lub przewijania.
Naciśnij Reload & record, aby raz załadować stronę ponownie przy włączonym nagrywaniu. Narzędzie otwiera się samoczynnie i teraz uwzględnia każde wywołanie addEventListener.
Kliknij wiersz na liście, aby przewinąć stronę do tego elementu i sflashować go. Copy report zawiera pełną listę w formie tekstowej.
Otwórz zakładkę DOM mutations i skorzystaj ze strony. Zmieniające się elementy migają, a te najbardziej zajęte wspinają się na górę listy.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 74 narzędzi programistycznych dla swojej przeglądarki.
