Binabalangkas Event Listeners ang bawat elemento na may event listener, na may kulay ayon sa uri — pag-click, pag-hover, pag-scroll, pagpindot, keyboard at form — ay nagpapakita kung saan nanggaling ang bawat tagapangasiwa, at nagpapa-flash ng mga elemento habang nagbabago ang DOM.
Ang pag-aaral kung bakit may tumutugon — o hindi — ay karaniwang nagsisimula sa isang tanong na hindi sasagutin ng pahina: mayroon bang tagahawak ng pag-click sa elementong ito? Aling elemento ang tunay na nagmamay-ari ng gawi ng hover? Ano ang pakikinig sa pag-scroll at ginagawang nauutal ang pahina? Maaaring ilista ng Browser DevTools ang listeners ng isang elemento sa isang pagkakataon, kung alam mo na kung aling elemento ang pipiliin.
Sinasagot ng tool na ito ang tanong para sa buong page nang sabay-sabay. Ang bawat elemento na may listener ay nakakakuha ng outline sa kulay ng uri nito — pag-click, pag-hover, pag-scroll, pagpindot at pag-drag, keyboard, o form at focus — at ang pag-hover ng isa ay nagpapakita ng eksaktong mga kaganapan at kung saan nanggaling ang bawat isa: isang inline na attribute, isang on-property, isang React o Vue handler, jQuery, o addEventListener. Ini-on at off ng mga tile ng kategorya ang bawat uri, at pinangalanan ng listahan sa ibaba ang bawat elemento, kaya isang pag-click ang mag-i-scroll sa iyo dito.
Ang mga balangkas ay pinangangasiwaan nang maayos. Inilalagay React listeners nito sa ugat at nagpapadala ng mga kaganapan sa loob, na gagawing naki-click ang buong app; itinatabi ng tool ang mga root registration na iyon at ipinapakita ang mga humahawak React sa mga elementong nagdedeklara sa kanila. Ang mabilisang pag-scan ay hindi nangangailangan ng pag-reload at sumasaklaw sa mga inline na humahawak, React, Vue at jQuery. Listeners na idinagdag gamit ang plain addEventListener bago ang pagbukas ng tool ay makikita lang mula sa simula ng pag-load ng page, kaya nire-reload Reload & record ang page nang isang beses nang naka-record ang — bubukas muli ang tool nang mag-isa kasama ang bawat listener na kasama, mga page-level sa window at document din.
Pinapanood ng pangalawang tab ang DOM mismo. Ang bawat idinagdag o inalis na node, pagbabago ng katangian at pagbabago ng teksto ay kumikislap sa pahina, ang mga counter ay nagpapakita ng mga mutasyon bawat segundo, at niraranggo ng isang listahan ang mga elementong pinakamaraming nagbabago, kasama ang mga katangiang kasama. Ang tuluy-tuloy na stream habang walang humahawak sa page ay karaniwang nangangahulugan ng timer, isang JavaScript-driven na animation o isang framework na muling nagre-render nang higit pa sa nararapat — mismong mga bagay na nakakaubos ng baterya at nagpapautal ng mga page.
Ang mga elementong may click, hover, scroll, touch, keyboard at form listeners ay nakabalangkas sa sarili nilang kulay, na may mga tile upang ipakita o itago ang bawat uri.
Mga inline na attribute, on-properties, React at Vue handler, jQuery event at addEventListener call, na may label sa bawat elemento.
Itinatabi ang mga root-level listeners ng React, at ang mga humahawak nito ay ipinapakita sa mga elementong nagdedeklara sa kanila sa halip na sa buong app.
Reload & record ang bawat addEventListener na tawag mula sa simula ng pag-load ng page, kasama ang window at listeners document, para sa isang load lang.
Nag-flash sa page ang mga idinagdag at inalis na node, mga pagbabago sa attribute at mga pagbabago sa text, na may mutations-per-second counter.
Ang isang nakararanggo na listahan ng mga elementong pinakanagbabago, kasama ang mga katangiang kasangkot, ay direktang tumuturo sa mga runaway na muling pag-render.
Tingnan sa isang sulyap kung ang isang button ay talagang may listener, o kung ang handler ay nasa isang elemento ng wrapper sa halip.
Hanapin ang bawat elementong nakikinig sa scroll, wheel o touchmove, kabilang listeners sa window at document.
Suriin kung aling mga kontrol ang tumutugon sa mga kaganapan sa keyboard at kung alin lamang ang tumutugon sa mouse.
Panoorin ang mutations counter habang ang pahina ay idle; mga elemento na patuloy na nagbabago ng punto sa isang timer o isang balangkas na gumagawa ng karagdagang trabaho.
Mag-hover sa isang hindi pamilyar na site upang makita kung aling mga bahagi ang interactive at kung aling framework ang nag-wire sa kanila.
I-click ang icon Event Listeners sa DevSuite Pro dock. Ang isang mabilis na pag-scan ay tumatakbo kaagad at binabalangkas ang bawat elemento na mahahanap nito.
Mag-hover ng anumang nakabalangkas na elemento upang makita ang mga kaganapan nito at ang kanilang mga pinagmulan. Gamitin ang mga tile ng kategorya upang ipakita lamang ang mga click, hover o scroll listeners.
Pindutin ang Reload & record upang i-reload ang page nang isang beses nang naka-on ang pag-record. Magbubukas muli ang tool sa sarili nitong at kasama na ngayon ang bawat addEventListener na tawag.
Mag-click sa isang row sa listahan upang mag-scroll sa pahina patungo sa elementong iyon at i-flash ito. Copy report ay nagbibigay sa iyo ng buong listahan bilang teksto.
Buksan ang tab DOM mutations at gamitin ang page. Ang pagpapalit ng mga elemento ay kumikislap, at ang mga pinakaabala ay umaakyat sa tuktok ng listahan.
I-install ang DevSuite Pro nang libre at i-unlock ang 74+ developer tools para sa iyong browser.
