Event Listeners hahmottelevat jokaisen elementin, jossa on event listener, lajiteltuina - napsautus, hiiri, vieritys, kosketus, näppäimistö ja lomake - näyttää, mistä kukin käsittelijä tuli, ja vilkkuu elementtejä DOM:n muuttuessa.
Sen selvittäminen, miksi jokin reagoi – tai ei – alkaa yleensä kysymyksellä, johon sivu ei vastaa: onko tällä elementillä ollenkaan napsautuskäsittelijää? Mikä elementti itse asiassa omistaa hover-käyttäytymisen? Mitä on vierityksen kuunteleminen ja sivun änkyttäminen? Selaimen DevTools voi luetella yhden elementin listeners kerrallaan, jos tiedät jo, mikä elementti valitaan.
Tämä työkalu vastaa koko sivun kysymykseen kerralla. Jokainen elementti, jossa on listener saa ääriviivat lajissaan - napsauta, vie hiiri, vieritä, kosketa ja vedä, näppäimistö tai muotoile ja tarkenna -, ja osoittimen osoittaminen näyttää tarkat tapahtumat ja mistä kukin on peräisin: tekstin sisäinen attribuutti, omaisuus, React tai Vue -käsittelijä, jQuery tai addEventListener. Luokkalaatat kytkevät jokaisen lajin päälle ja pois, ja alla oleva luettelo nimeää jokaisen elementin, joten yksi napsautus vie sinut siihen.
Kehyksiä käsitellään oikein. React liittää listeners juureen ja lähettää tapahtumat sisäisesti, mikä saa koko sovelluksen näyttämään napsautettavalta. työkalu jättää nämä juurirekisteröinnit sivuun ja näyttää React -käsittelijät elementeille, jotka ilmoittavat ne. Pikaskannaus ei vaadi uudelleenlatausta, ja se kattaa sisäiset käsittelijät, React, Vue ja jQuery. Listeners jotka on lisätty tavallisella addEventListener ennen työkalun avaamista, näkyvät vain sivun latauksen alusta lähtien, joten Reload & record lataa sivun uudelleen kerran tallennus päällä – työkalu avautuu sitten itsestään uudelleen jokaisen listener mukana, sivutason kuuntelijat myös window ja document.
Toinen välilehti tarkkailee itse DOM:ia. Jokainen lisätty tai poistettu solmu, määritteen muutos ja tekstin muutos vilkkuu sivulla, laskurit näyttävät mutaatioita sekunnissa ja luettelo listaa eniten muuttuvat elementit ja niihin liittyvät attribuutit. Tasainen stream, kun kukaan ei koske sivuun, tarkoittaa yleensä ajastinta, JavaScript-pohjaista animaatiota tai kehystä, joka renderöi uudelleen enemmän kuin sen pitäisi – juuri niitä asioita, jotka kuluttavat akkuja ja saavat sivut änkyttämään.
Elementit, joissa on napsautus, osoitin, vieritys, kosketus, näppäimistö ja listeners on ääriviivattu omalla värillään, ja kunkin tyypin ruudut näkyvät tai piilotetaan.
Sisäiset attribuutit, ominaisuudet, React ja Vue -käsittelijät, jQuery tapahtumat ja addEventListener -kutsut, merkitty jokaiseen elementtiin.
React juuritason listeners on asetettu sivuun, ja sen käsittelijät näkyvät elementeissä, jotka ilmoittavat ne koko sovelluksen sijaan.
Reload & record sieppaa jokaisen addEventListener -kutsun sivun latauksen alusta alkaen, mukaan lukien window ja document listeners vain kyseiselle lataukselle.
Lisätyt ja poistetut solmut, attribuuttien muutokset ja tekstimuutokset vilkkuvat sivulla mutaatioita sekunnissa laskurilla.
Eniten muuttuvien elementtien paremmuusjärjestys ja niihin liittyvät attribuutit viittaavat suoraan karkaaviin uudelleenrenderöityihin.
Näet yhdellä silmäyksellä, onko painikkeella todella listener vai istuuko käsittelijä sen sijaan kääreelementin päällä.
Löydä jokainen elementti, joka kuuntelee vieritystä, rullaa tai kosketusliikettä, mukaan lukien listeners window ja document.
Tarkista, mitkä säätimet reagoivat näppäimistötapahtumiin ja mitkä vain hiireen.
Tarkkaile mutaatiolaskuria sivun ollessa käyttämättömänä; jatkuvasti muuttuvat elementit viittaavat ajastimeen tai ylimääräistä työtä tekevään kehykseen.
Vie hiiri vieraalla sivustolla nähdäksesi, mitkä osat ovat interaktiivisia ja mikä kehys ne on kytketty.
Napsauta Event Listeners -kuvaketta DevSuite Pro Dockissa. Pikaskannaus suoritetaan välittömästi ja hahmottaa jokaisen löytämänsä elementin.
Näet sen tapahtumat ja niiden lähteet viemällä hiiren osoittimen johonkin hahmoteltuun elementtiin. Käytä luokkaruutuja näyttääksesi vain napsautus-, hiiri- tai listeners.
Paina Reload & record ladataksesi sivun uudelleen kerran tallennus päällä. Työkalu avautuu uudelleen itsestään ja sisältää nyt jokaisen addEventListener -kutsun.
Napsauta riviä luettelossa vierittääksesi sivua kyseisen elementin kohdalle ja käynnistääksesi sen. Copy report antaa sinulle täydellisen luettelon tekstinä.
Avaa DOM mutations -välilehti ja käytä sivua. Vaihtuvat elementit vilkkuvat, ja vilkkaimmat nousevat listan kärkeen.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 74 kehittäjätyökalua selaimellesi.
