Event Listeners delinea ogni elemento che ha un event listener, colorato per tipo (clic, passaggio del mouse, scorrimento, tocco, tastiera e modulo) mostra da dove proviene ciascun gestore e lampeggia gli elementi man mano che il DOM cambia.
Capire perché qualcosa reagisce – o non reagisce – di solito inizia con una domanda a cui la pagina non risponde: esiste un gestore di clic su questo elemento? Quale elemento possiede effettivamente il comportamento al passaggio del mouse? Che cosa significa scorrere la pagina e farla balbettare? Browser DevTools può elencare gli listeners di un elemento alla volta, se sai già quale elemento selezionare.
Questo strumento risponde alla domanda per l'intera pagina in una sola volta. Ogni elemento con un listener ottiene un contorno nel colore del suo tipo - clic, passaggio del mouse, scorrimento, tocco e trascinamento, tastiera o modulo e messa a fuoco - e passando il mouse su uno mostra gli eventi esatti e la provenienza di ciascuno: un attributo in linea, una proprietà, un gestore React o Vue, jQuery o addEventListener. I riquadri di categoria attivano e disattivano ogni tipo e l'elenco sottostante nomina ogni elemento, quindi con un clic puoi scorrere fino ad esso.
I framework sono gestiti correttamente. React collega i suoi listeners alla root e invia eventi internamente, il che renderebbe l'intera app cliccabile; lo strumento mette da parte quelle registrazioni root e mostra i gestori React sugli elementi che le dichiarano. La scansione rapida non necessita di ricarica e copre i gestori in linea, React, Vue e jQuery. Listeners aggiunti con il semplice addEventListener prima dell'apertura dello strumento possono essere visti solo dall'inizio del caricamento di una pagina, quindi Reload & record ricarica la pagina una volta con la registrazione attivata: lo strumento quindi si riapre da solo con ogni listener incluso, quelli a livello di pagina nella window e anche document.
La seconda scheda controlla il DOM stesso. Ogni nodo aggiunto o rimosso, modifica di attributo e modifica di testo lampeggia sulla pagina, i contatori mostrano le mutazioni al secondo e un elenco classifica gli elementi che cambiano di più, con gli attributi coinvolti. Un flusso costante mentre nessuno tocca la pagina di solito significa un timer, un'animazione basata su JavaScript o un framework che esegue nuovamente il rendering più del dovuto: esattamente le cose che consumano le batterie e fanno balbettare le pagine.
Gli elementi con clic, passaggio del mouse, scorrimento, tocco, tastiera e listeners di moduli sono delineati con il proprio colore, con riquadri per mostrare o nascondere ogni tipo.
Attributi in linea, proprietà on-properties, gestori React e Vue, eventi jQuery e chiamate addEventListener, etichettati su ogni elemento.
listeners a livello root di React vengono messi da parte e i suoi gestori vengono mostrati sugli elementi che li dichiarano anziché sull'intera app.
Reload & record rileva ogni chiamata addEventListener dall'inizio del caricamento di una pagina, inclusi listeners window e document, solo per quel caricamento.
I nodi aggiunti e rimossi, le modifiche agli attributi e le modifiche al testo lampeggiano sulla pagina, con un contatore di mutazioni al secondo.
Un elenco classificato degli elementi che cambiano di più, con gli attributi coinvolti, punta direttamente a re-render fuori controllo.
Scopri a colpo d'occhio se un pulsante ha effettivamente un listener o se il gestore si trova invece su un elemento wrapper.
Trova ogni elemento ascoltando lo scorrimento, la rotella o il tocco, inclusi listeners su window e document.
Controlla quali controlli rispondono agli eventi della tastiera e quali rispondono solo al mouse.
Osserva il contatore delle mutazioni mentre la pagina è inattiva; gli elementi che continuano a cambiare indicano un timer o una struttura che svolge un lavoro extra.
Passa il mouse su un sito sconosciuto per vedere quali parti sono interattive e quale framework le ha collegate.
Fai clic sull'icona Event Listeners nel dock DevSuite Pro. Una scansione rapida viene eseguita immediatamente e delinea ogni elemento trovato.
Passa il mouse su qualsiasi elemento delineato per visualizzarne gli eventi e le relative fonti. Utilizza i riquadri delle categorie per mostrare solo listeners fanno clic, passano il mouse o scorrono.
Premere Reload & record per ricaricare la pagina una volta con la registrazione attiva. Lo strumento si riapre automaticamente e ora include ogni chiamata addEventListener.
Fare clic su una riga nell'elenco per scorrere la pagina fino a quell'elemento e visualizzarlo. Copy report ti fornisce l'elenco completo come testo.
Apri la scheda DOM mutations e utilizza la pagina. Gli elementi che cambiano lampeggiano e quelli più occupati salgono in cima all'elenco.
Installa DevSuite Pro gratuitamente e sblocca più di 74 strumenti per sviluppatori per il tuo browser.
