Event Listeners minden olyan elemet körvonalaznak, amelyhez event listener tartozik, fajták szerint színezve – kattintás, egérmutató, görgetés, érintés, billentyűzet és űrlap – megmutatja, honnan származnak az egyes kezelők, és felvillantja az elemeket, ahogy a DOM változik.
Annak kidolgozása, hogy valami miért reagál – vagy nem – általában egy olyan kérdéssel kezdődik, amelyre az oldal nem válaszol: létezik-e egyáltalán kattintáskezelő ezen az elemen? Melyik elem tulajdonképpen a lebegési viselkedés tulajdonosa? Mit jelent a görgetés hallgatása és az oldal akadozása? A Browser DevTools egyszerre csak egy elem listeners tudja listázni, ha már tudja, melyik elemet válassza ki.
Ez az eszköz egyszerre válaszol a kérdésre az egész oldalra vonatkozóan. A listener minden eleme a maga fajtájának megfelelő színű körvonalat kap – kattintás, lebegtetés, görgetés, érintés és húzás, billentyűzet vagy formázás és fókusz –, és rámutatva láthatók a pontos események és honnan származnak: egy soron belüli attribútum, egy tulajdonság, egy React vagy Vue kezelő, jQuery vagy addEventListener. A kategóriacsempék be- és kikapcsolják az egyes fajtákat, az alatta lévő lista pedig minden elemet megnevez, így egy kattintással rá lehet görgetni.
A kereteket megfelelően kezelik. React a gyökérhez kapcsolja listeners, és belsőleg küldi el az eseményeket, ami az egész alkalmazást kattinthatóvá teszi; az eszköz félreteszi ezeket a gyökérregisztrációkat, és megjeleníti a React kezelőket az azokat deklaráló elemeken. A gyors vizsgálat nem igényel újratöltést, és a beépített kezelőkre, React, Vue és jQuery vonatkozik. Az egyszerű addEventListener segítségével az eszköz megnyitása előtt hozzáadott Listeners csak az oldalbetöltés kezdetétől láthatók, így Reload & record egyszer újratölti az oldalt a felvétel bekapcsolásával – az eszköz ezután magától megnyílik minden listener, oldalszintűekkel window és document is.
A második lap magát a DOM-ot figyeli. Minden hozzáadott vagy eltávolított csomópont, attribútum-módosítás és szövegmódosítás villog az oldalon, a számlálók másodpercenként mutációkat mutatnak, és egy lista rangsorolja a leginkább változó elemeket az érintett attribútumokkal együtt. A folyamatos adatfolyam, miközben senki sem érinti meg az oldalt, általában egy időzítőt, egy JavaScript-vezérelt animációt vagy egy keretrendszert jelent, amely a kelleténél többet renderel vissza – pontosan azokat a dolgokat, amelyek lemerítik az akkumulátorokat, és akadoznak az oldalak.
A kattintással, egérmutatóval, görgetéssel, érintéssel, billentyűzettel és listeners elemek saját színükben körvonalazódnak, az egyes típusokat megjelenítő vagy elrejthető csempékkel.
Soron belüli attribútumok, on-tulajdonságok, React és Vue kezelők, jQuery események és addEventListener hívások, minden elemen felcímkézve.
React gyökérszintű listeners félre vannak helyezve, kezelői pedig az őket deklaráló elemeken jelennek meg, nem pedig az egész alkalmazáson.
Reload & record minden addEventListener hívást elkap az oldalbetöltés kezdetétől, beleértve window és document listeners, csak az adott betöltésnél.
A hozzáadott és eltávolított csomópontok, attribútum- és szövegmódosítások villognak az oldalon, egy másodpercenkénti mutáció számlálóval.
A legtöbbet változó elemek rangsorolt listája az érintett attribútumokkal együtt egyenesen az elszabadult újramegjelenítésekre mutat.
Egy pillantással megnézheti, hogy egy gombnak valóban van-e listener, vagy a kezelő inkább egy burkolóelemen ül.
Keressen minden elemet a görgetésre, görgetésre vagy érintés közbeni mozgásra, beleértve listeners window és document.
Ellenőrizze, hogy mely vezérlők reagálnak a billentyűzet eseményeire, és melyek csak az egérre.
Figyelje a mutációk számlálóját, amíg az oldal tétlen; a folyamatosan változó elemek egy időzítőre vagy egy extra munkát végző keretrendszerre mutatnak.
Mutasson egy ismeretlen webhely köré, hogy megtudja, mely részek interaktívak, és melyik keretrendszer csatlakoztatta őket.
Kattintson az Event Listeners ikonra a DevSuite Pro dokkban. A gyors vizsgálat azonnal lefut, és minden talált elemet felvázol.
Vigye az egérmutatót bármely körvonalazott elemre az események és azok forrásainak megtekintéséhez. A kategóriacsempék használatával csak a kattintásra, az egérmutatóra vagy a görgetésre vonatkozó listeners jeleníthetők meg.
Nyomja meg Reload & record az oldal egyszeri újratöltéséhez a felvétel bekapcsolásával. Az eszköz magától újra megnyílik, és mostantól minden addEventListener hívást tartalmaz.
Kattintson egy sorra a listában az oldal görgetéséhez az adott elemhez, és villogtassa azt. Copy report a teljes listát szövegként jeleníti meg.
Nyissa meg a DOM mutations lapot, és használja az oldalt. A változó elemek villognak, és a legforgalmasabbak a lista élére kerülnek.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 74+ fejlesztői eszközt böngészőjéhez.
