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.