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
Effettuare update massivi con Entity Framework Core 7
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Usare il versioning con i controller di ASP.NET Core Web API
Generare file per il download da Blazor WebAssembly
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Utilizzare Model as a Service su Microsoft Azure
Eseguire una GroupBy per entity in Entity Framework
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Generare token per autenicarsi sulle API di GitHub
Eseguire attività con Azure Container Jobs
Definire lo stile CSS in base alle dimensioni del container
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10