Kuinka kirjata kaikki JavaScript-tapahtumat konsoliin virheenkorjausta varten

Matthias Kupperschmidt

10. June 2024

1min read

Chrome Dev Tools tag icon svg

Analytiikka Virheenkorjaus tag icon svg

JavaScript Opetus

Katsotaanpa, kuinka virheenkorjata kaikki JavaScript-tapahtumat ja kirjata ne konsoliin kätevällä tempulla.

Esimerkiksi on tärkeää, kun virheenkorjaat verkkosivua, nähdä kuinka monta submit-tapahtumaa lomake-elementti lähettää.

Tällä virheenkorjausmenetelmällä estät selaintapahtumien lähettämisen ja seuraamisen useita kertoja.

Kuuntele kaikkia tapahtumia JavaScriptillä

Chrome Developer Toolsissa on kätevä API, joka tekee tämän helpoksi.

monitorEvents API mahdollistaa minkä tahansa JavaScript-tapahtuman kirjaamisen konsoliin Chromessa. Sinun tarvitsee vain antaa API:lle elementti ja *vaihtoehtoisesti* tapahtuma, jota haluat kuunnella:

  //syntaksi
  //monitorEvents(element,event)
  
  //kuuntele kaikkia tapahtumia
  monitorEvents(window);
  
  //lopeta kuuntelu
  unmonitorEvents(window);

Kuunnellaksesi kaikkia submit-tapahtumia koodi näyttäisi tältä:

  //aloita kuuntelu
  monitorEvents(window,"submit");
  
  //lopeta kuuntelu
  unmonitorEvents(window,"submit");

Huomaa, että jos haluat lopettaa tapahtumien kuuntelun, käytä yksinkertaisesti unmonitorEvents.

Esimerkki: Kirjaa kaikki click-tapahtumat window-objektista konsoliin

Nyt, kun tämä kätevä virheenkorjaustyökalu on työkalupakissamme, voimme esimerkiksi valita lomake-elementin Chrome Developer Toolsissa aloittaaksemme submit-tapahtumien seurannan.

Kun valitset elementin elementit-välilehdeltä, Chrome Dev Tools näyttää pienen $0-merkin sen vieressä.

Jos pidät HTML-Elementin valittuna, voit nyt käyttää $0-merkkiä nopeasti viitataksesi elementtiin konsolissa ilman, että tarvitset CSS-valitsinta.

Nyt yhdessä monitorEvents API:n kanssa voit nopeasti ja helposti kuunnella kaikkia käynnissä olevia JavaScript-tapahtumia ja tulostaa ne konsoliin virheenkorjausta varten:

Tämä on hyödyllistä kaikenlaisten tapahtumaseurantojen kannalta, koska voit virheenkorjata jokaista JavaScript-tapahtumaa konsolissa ilman, että sinun tarvitsee ajaa GTM Debuggeria.

Siinäpä se. Käyttämällä Chrome Dev Toolsin API:a, se on nopein tapa seurata kaikkia JavaScript-tapahtumia, jonka tiedän.

Kerro minulle Twitterissä jos se toimi sinulle ja pidit tästä. ✌️

Matthias Kupperschmidt

10. June 2024

1min read