Event Listeners iezīmē katru elementu, kuram ir event listener, iekrāsojot pēc veida — klikšķi, virziet kursoru, ritināšanu, pieskārienu, tastatūru un formu — parāda, no kurienes nāk katrs apstrādātājs, un mirgo elementus, mainoties DOM.
Noskaidrošana, kāpēc kaut kas reaģē vai nereaģē, parasti sākas ar jautājumu, uz kuru lapa neatbildēs: vai šim elementam vispār ir klikšķu apstrādātājs? Kuram elementam faktiski pieder kursora novietošana? Ko nozīmē klausīties ritināšanu un lapas stostīšanos? Browser DevTools var uzskaitīt viena elementa listeners vienlaikus, ja jau zināt, kuru elementu atlasīt.
Šis rīks atbild uz jautājumu uzreiz par visu lapu. Katrs listener elements iegūst kontūru tā veida krāsā — noklikšķiniet, virziet kursoru, ritiniet, pieskarieties un velciet, tastatūra vai veidojiet un fokusējiet —, un, novietojot kursoru uz vienu, tiek parādīti precīzi notikumi un to izcelsme: iekļauts atribūts, īpašums, React vai Vue apdarinātājs, jQuery vai addEventListener. Kategoriju flīzes ieslēdz un izslēdz katru veidu, un sarakstā zem katra elementa tiek nosaukts katrs elements, tāpēc ar vienu klikšķi tiek ritināts līdz tam.
Ietvari tiek apstrādāti pareizi. React piesaista savus listeners saknei un nosūta notikumus iekšēji, kas liktu visai lietotnei izskatīties klikšķināmai; rīks atstāj šīs saknes reģistrācijas malā un parāda React apstrādātājus elementiem, kas tos deklarē. Ātrajai skenēšanai nav nepieciešama atkārtota ielāde, un tā attiecas uz iekļautajiem apdarinātājiem, React, Vue un jQuery. Listeners kas pievienoti ar vienkāršu addEventListener pirms rīka atvēršanas, var redzēt tikai no lapas ielādes sākuma, tāpēc Reload & record atkārtoti ielādē lapu vienreiz, kad ir ieslēgts ieraksts — rīks pēc tam tiek atkārtoti atvērts ar katru iekļauto listener, arī lapas līmeņa listeners window un document.
Otrā cilne skatās pašu DOM. Katrs pievienotais vai noņemtais mezgls, atribūtu izmaiņas un teksta izmaiņas mirgo lapā, skaitītāji rāda mutācijas sekundē, un saraksts sarindo elementus, kas visvairāk mainās, ar iesaistītajiem atribūtiem. Nepārtraukta straume, kamēr neviens nepieskaras lapai, parasti nozīmē taimeri, JavaScript vadītu animāciju vai ietvaru, kas atkārtoti atveido vairāk nekā vajadzētu — tieši to, kas izlādē baterijas un liek lapām stostīties.
Elementi ar klikšķi, virziet kursoru, ritināšanu, pieskārienu, tastatūru un veidlapu listeners ir ieskicēti savā krāsā ar katra veida elementiem, lai parādītu vai paslēptu.
Iekļautie atribūti, rekvizīti, React un Vue apstrādātāji, jQuery notikumi un addEventListener izsaukumi, kas marķēti katrā elementā.
React saknes līmeņa listeners ir atstāti malā, un tā apstrādātāji tiek rādīti elementos, kas tos deklarē, nevis visā lietotnē.
Reload & record katru addEventListener izsaukumu no lapas ielādes sākuma, ieskaitot window un document listeners, tikai šai vienai ielādei.
Lapā mirgo pievienotie un noņemtie mezgli, atribūtu izmaiņas un teksta izmaiņas, izmantojot mutāciju sekundē skaitītāju.
Sarindots to elementu saraksts, kas mainās visvairāk, ar iesaistītajiem atribūtiem, norāda tieši uz bēguļojošu atkārtotu renderēšanu.
Vienā mirklī noskaidrojiet, vai pogai patiešām ir listener vai apdarinātājs tā vietā atrodas uz iesaiņojuma elementa.
Atrodiet katru elementu, kas klausās ritināšanu, ritenīti vai pieskārienu, tostarp listeners window un document.
Pārbaudiet, kuras vadīklas reaģē uz tastatūras notikumiem un kuras tikai uz peli.
Skatieties mutāciju skaitītāju, kamēr lapa ir dīkstāvē; elementi, kas pastāvīgi mainās, norāda uz taimeri vai sistēmu, kas veic papildu darbu.
Virziet kursoru ap nepazīstamu vietni, lai redzētu, kuras daļas ir interaktīvas un ar kuru sistēmu tās ir savienotas.
Noklikšķiniet uz ikonas Event Listeners DevSuite Pro dokā. Ātrā skenēšana tiek veikta nekavējoties un iezīmē katru atrasto elementu.
Virziet kursoru uz jebkuru ieskicēto elementu, lai skatītu tā notikumus un to avotus. Izmantojiet kategoriju elementus, lai rādītu tikai klikšķu, virzīšanas kursoru vai ritināšanas listeners.
Nospiediet Reload & record, lai atkārtoti ielādētu lapu ar ieslēgtu ierakstīšanu. Rīks tiek atkārtoti atvērts pats un tagad ietver katru addEventListener zvanu.
Noklikšķiniet uz rindas sarakstā, lai ritinātu lapu līdz šim elementam un mirgotu to. Copy report sniedz jums pilnu sarakstu kā tekstu.
Atveriet cilni DOM mutations un izmantojiet lapu. Mainīgie elementi mirgo, un noslogotākie paceļas saraksta augšgalā.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 74+ izstrādātāju rīkus savam pārlūkam.
