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
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Limitare le richieste lato server con l'interactive routing di Blazor 8
Sfruttare al massimo i topic space di Event Grid MQTT
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare un service principal per accedere a Azure Container Registry
Routing statico e PreRendering in una Blazor Web App
Copiare automaticamente le secret tra più repository di GitHub
Load test di ASP.NET Core con k6
Definire stili a livello di libreria in Angular
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Code scanning e advanced security con Azure DevOps
Sfruttare MQTT in cloud e in edge con Azure Event Grid