Event Listeners subliniază fiecare element care are un event listener, colorat în funcție de natură - clic, trece cu mouse-ul, derulează, atinge, tastatură și formular - arată de unde provine fiecare handler și afișează elemente pe măsură ce DOM-ul se modifică.
A determina de ce ceva reacționează – sau nu – începe de obicei cu o întrebare la care pagina nu va răspunde: există un handler de clic pe acest element? Care element deține de fapt comportamentul de hover? Ce înseamnă să asculți derularea și să faci pagina să se bâlbâie? Browser DevTools poate lista listeners unui element la un moment dat, dacă știți deja ce element să selectați.
Acest instrument răspunde la întrebarea pentru întreaga pagină simultan. Fiecare element cu un listener primește un contur în culoarea lui - faceți clic, treceți cu mouse-ul, derulați, atingeți și glisați, tastatura sau formularul și focalizați - iar trecerea cu mouse-ul pe unul arată evenimentele exacte și de unde provine fiecare: un atribut inline, o proprietate, un handler React sau Vue, jQuery sau addEventListener. Dale de categorii activează și dezactivează fiecare tip, iar lista de dedesubt numește fiecare element, așa că un clic te derulează la el.
Cadrele sunt gestionate corect. React își atașează listeners la rădăcină și trimite evenimente în interior, ceea ce ar face ca întreaga aplicație să pară clicabilă; instrumentul pune deoparte acele înregistrări rădăcină și arată manipulatorii React pe elementele care le declară. Scanarea rapidă nu necesită reîncărcare și acoperă manevrele inline, React, Vue și jQuery. Listeners adăugați cu addEventListener simplu înainte de deschiderea instrumentului pot fi văzuți doar de la începutul încărcării unei pagini, așa că Reload & record reîncarcă pagina o dată cu înregistrarea activată - instrumentul se redeschide apoi de la sine cu fiecare listener inclus, și cei la nivel de pagină pe window și document.
A doua filă urmărește DOM-ul în sine. Fiecare nod adăugat sau eliminat, schimbare de atribut și modificare de text clipește pe pagină, contoarele arată mutații pe secundă, iar o listă ierarhizează elementele care se schimbă cel mai mult, cu atributele implicate. Un flux constant în timp ce nimeni nu atinge pagina înseamnă, de obicei, un cronometru, o animație bazată pe JavaScript sau un cadru care redă mai mult decât ar trebui - exact lucrurile care consumă bateriile și fac paginile să se bâlbâie.
Elementele cu clic, hover, derulare, atingere, tastatură și listeners de formulare sunt conturate în propria lor culoare, cu plăci pentru a afișa sau ascunde fiecare tip.
Atribute inline, on-properties, handlere React și Vue, evenimente jQuery și apeluri addEventListener, etichetate pe fiecare element.
listeners React la nivel de rădăcină sunt lăsați deoparte, iar gestionanții săi sunt afișați mai degrabă pe elementele care le declară decât pe întreaga aplicație.
Reload & record captează fiecare apel addEventListener de la începutul încărcării unei pagini, inclusiv listeners window și document, numai pentru acea încărcare.
Noduri adăugate și eliminate, modificările atributelor și modificările textului clipesc pe pagină, cu un contor de mutații pe secundă.
O listă clasată a elementelor care se schimbă cel mai mult, cu atributele implicate, indică direct re-rendările fugitive.
Vedeți dintr-o privire dacă un buton are de fapt un listener sau dacă handlerul se află pe un element de înveliș.
Găsiți fiecare element care ascultă derulare, rotiță sau atingere, inclusiv listeners din window și document.
Verificați ce comenzi răspund la evenimentele de la tastatură și care răspund doar la mouse.
Urmăriți contorul de mutații în timp ce pagina este inactivă; elemente care continuă să se schimbe punctul într-un cronometru sau un cadru care fac muncă suplimentară.
Plasați cursorul pe un site necunoscut pentru a vedea ce părți sunt interactive și ce cadru le-a conectat.
Faceți clic pe pictograma Event Listeners din dock-ul DevSuite Pro. O scanare rapidă rulează imediat și subliniază fiecare element pe care îl găsește.
Plasați cursorul pe orice element subliniat pentru a vedea evenimentele și sursele acestora. Folosiți plăcile de categorie pentru a afișa numai listeners dau clic, trec cu mouse-ul sau derulați.
Apăsați Reload & record pentru a reîncărca pagina o dată cu înregistrarea activată. Instrumentul se redeschide singur și acum include fiecare apel addEventListener.
Faceți clic pe un rând din listă pentru a derula pagina la acel element și pentru a-l afișa. Copy report vă oferă lista completă ca text.
Deschideți fila DOM mutations și utilizați pagina. Elementele care se schimbă clipesc, iar cele mai aglomerate se ridică în fruntea listei.
Instalează DevSuite Pro gratuit și deblochează peste 74 de instrumente pentru dezvoltatori în browserul tău.
