Event Listeners оцртавају сваки елемент који има event listener, обојен по врсти — клик, лебдење, померање, додир, тастатура и образац — показује одакле је дошао сваки руковалац и трепери елементе како се ДОМ мења.
Проналажење зашто нешто реагује – или не – обично почиње питањем на које страница неће одговорити: да ли уопште постоји руковалац кликовима на овом елементу? Који елемент заправо поседује понашање лебдења? Шта то слушање скролује и чини да страница запиње? DevTools претраживача може да наведе listeners једног по једног елемента, ако већ знате који елемент да изаберете.
Овај алат одговара на питање за целу страницу одједном. Сваки елемент са listener добија обрис у боји своје врсте — кликните, лебдите, померајте, додирујте и превуците, тастатуру или форму и фокус — а лебдећи преко једног приказује тачне догађаје и одакле је сваки дошао: инлине атрибут, он-проперти, React или Vue руковалац, jQuery или addEventListener. Плочице категорије укључују и искључују сваку врсту, а листа испод назива сваки елемент, тако да се једним кликом скролујете до њега.
Оквири се правилно рукују. React повезује своје listeners са роот-ом и интерно шаље догађаје, што би учинило да цела апликација изгледа да се кликне; алат оставља те роот регистрације по страни и приказује React руковаоце на елементима који их декларишу. Брзо скенирање не захтева поновно учитавање и покрива инлине руковаоце, React, Vue и jQuery. Listeners додани помоћу обичног addEventListener пре отварања алатке могу се видети само од почетка учитавања странице, тако да Reload & record поново учитава страницу једном са укљученим снимањем — алат се затим поново отвара сам са сваким укљученим listener, онима на нивоу странице у window и document.
Друга картица прати сам ДОМ. Сваки додат или уклоњен чвор, промена атрибута и промена текста трепери на страници, бројачи показују мутације у секунди, а листа рангира елементе који се највише мењају, са укљученим атрибутима. Сталан ток док нико не додирује страницу обично значи тајмер, анимацију покретану ЈаваСцрипт-ом или рендеровање оквира више него што би требало — управо оно што празни батерије и чини да странице замуцкују.
Елементи са кликом, лебдењем, померањем, додиром, тастатуром и listeners образаца су оцртани у својој боји, са плочицама које приказују или сакривају сваку врсту.
Инлине атрибути, он-пропертиес, React и Vue руковаоци, jQuery догађаји и addEventListener позиви, означени на сваком елементу.
React -ови listeners основног нивоа су остављени по страни, а његови руковаоци су приказани на елементима који их декларишу, а не на целој апликацији.
Reload & record хвата сваки позив addEventListener од почетка учитавања странице, укључујући listeners window и document, само за то једно учитавање.
Додати и уклоњени чворови, промене атрибута и промене текста трепере на страници, са бројачем мутација у секунди.
Рангирана листа елемената који се највише мењају, са укљученим атрибутима, указује директно на одбегло поновно приказивање.
Погледајте на први поглед да ли дугме заиста има listener или се руковалац налази на елементу омотача.
Пронађите сваки елемент који слуша померање, точкић или померање додира, укључујући listeners на window и document.
Проверите које контроле реагују на догађаје са тастатуре, а које само на миш.
Гледајте бројач мутација док је страница неактивна; елементи који се стално мењају указују на тајмер или оквир који обавља додатни посао.
Пређите мишем око непознатог сајта да бисте видели који делови су интерактивни и који оквир их повезује.
Кликните на икону Event Listeners у DevSuite Pro доку. Брзо скенирање се покреће одмах и приказује сваки елемент који пронађе.
Задржите показивач миша на било ком истакнутом елементу да бисте видели његове догађаје и њихове изворе. Користите плочице категорије да бисте приказали само listeners кликова, лебдења или померања.
Притисните Reload & record да једном поново учитај страницу са укљученим снимањем. Алат се поново отвара сам и сада укључује сваки позив addEventListener.
Кликните на ред на листи да скролујете страницу до тог елемента и флешујете га. Copy report вам даје пуну листу као текст.
Отворите картицу DOM mutations и користите страницу. Елементи који се мењају трепере, а најпрометнији се пењу на врх листе.
Instalirajte DevSuite Pro besplatno i otključajte 74+ alata za programere za svoj pretraživač.
