Nello scorso script abbiamo visto come grazie ai DevTools di chrome abbiamo la possibilità di identificare il codice inutilizzato. Oggi invece li utilizzeremo per aiutarci a capire cosa avviene nella pagina attraverso dei messaggi in console. Nello specifico andremo a utilizzare i metodi monitorEvents e unmonitorEvents.
Con monitorEvents ci sottoscriviamo a eventi che possono provenire da un'interazione tramite mouse/touch, tastiera o ridimensionamento della finestra. Andiamo più nello specifico di questa funzionalità:
// ogni volta che avverrà uno scroll o un resize della pagina monitorEvents(window, ["resize", "scroll"]) // ogni volta che verrà effettuata un'interazione con il mouse monitorEvents(document.body, 'mouse')
Possiamo anche registrarci a eventi che avvengono su un elemento: ispezionando la pagina e selezionando l'elemento, possiamo utilizzare l'alias $0 per creare una sottoscrizione che notificherà solo gli eventi che avverranno su quell'oggetto.
// solo quando il mouse andrà sopra l'elemento selezionato monitorEvents($0, 'mouseover')
Una volta terminata l'analisi utilizziamo la funzione unmonitorEvents, fornendo l'oggetto come primo argomento, per rimuovere il binding degli eventi.
// dismissione eventi window unmonitorEvents(window) // dismissione eventi body unmonitorEvents(document.body) // dismissione eventi sull'elemento selezionato unmonitorEvents($0)
Vi sono molti altri tipi di eventi tracciabili: la lista completa può essere trovata a questo https://developer.chrome.com/docs/devtools/console/utilities/#monitorEvents-function">link.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare l'API del browser fetch
Linting di un Dockerfile con un workflow di GitHub
Log streaming di una Azure Container App
Leggere e scrivere su cookie tramite Blazor
Creare un router per Single Page Application con l'evento navigate
Parallelizzare le chiamate HTTP con async/await e le Promise in JavaScript
Gestire dati sensibili nella configurazione in ASP.NET Core
Ottimizzare serializzazione e deserializzaione tramite le options con System.Text.Json
Eliminare spazio inutilizzato in un Azure Container Registry
Innestare una query nel metodo Contains di Entity Framework Core
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Scoprire le ottimizzazioni di Entity Framework Core in fase di scrittura di un solo record
I più letti di oggi
- Linting di un Dockerfile con un workflow di GitHub
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- 3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
- Monitorare i server on-premises con Azure Arc