Tracciare gli eventi tramite i DevTools di Chrome

di Morgan Pizzini, in HTML5, JavaScript,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi