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
Ottimizzare la persistenza che coinvolge un solo oggetto con Entity Framework Core 7
Mostrare una preview durante l'upload di un'immagine in Blazor
Montare blob e file share su Azure App Service
Pubblicare un pacchetto di NuGet nel feed di GitHub
Introduzione alla security con GitHub
Modernizzare le applicazioni WPF e Windows Forms con Blazor
Taggare automaticamente un repository con un workflow di GitHub
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Configurare policy CORS in Azure Container Apps
Utilizzo di Set e Array in JavaScript
Health monitoring con Azure Container App
Sviluppo applicazioni x-plat con .NET MAUI