Event Listeners descreve cada elemento que possui um event listener, colorido por tipo - clique, passar o mouse, rolar, tocar, teclado e formulário - mostra de onde veio cada manipulador e exibe os elementos conforme o DOM muda.
Descobrir por que algo reage – ou não – geralmente começa com uma pergunta que a página não responderá: existe algum manipulador de cliques neste elemento? Qual elemento realmente possui o comportamento de foco? O que está ouvindo rolar e fazendo a página gaguejar? DevTools do navegador pode listar os listeners de um elemento por vez, se você já souber qual elemento selecionar.
Esta ferramenta responde à pergunta de toda a página de uma vez. Cada elemento com um listener recebe um contorno na cor de seu tipo - clicar, passar o mouse, rolar, tocar e arrastar, teclado ou forma e foco - e passar o mouse mostra os eventos exatos e de onde cada um veio: um atributo inline, uma propriedade, um manipulador React ou Vue, jQuery ou addEventListener. Os blocos de categoria ativam e desativam cada tipo, e a lista abaixo nomeia cada elemento, então um clique leva você até ele.
As estruturas são tratadas corretamente. React anexa seus listeners à raiz e despacha eventos internamente, o que faria com que todo o aplicativo parecesse clicável; a ferramenta deixa de lado esses registros raiz e mostra os manipuladores React nos elementos que os declaram. A verificação rápida não precisa ser recarregada e abrange manipuladores in-line, React, Vue e jQuery. Listeners adicionados com addEventListener simples antes da ferramenta ser aberta só podem ser vistos no início do carregamento da página, portanto, Reload & record recarrega a página uma vez com a gravação ativada - a ferramenta então reabre sozinha com todos listener incluídos, os de nível de página na window e document também.
A segunda aba monitora o próprio DOM. Cada nó adicionado ou removido, alteração de atributo e alteração de texto pisca na página, os contadores mostram mutações por segundo e uma lista classifica os elementos que mais mudam, com os atributos envolvidos. Um fluxo constante enquanto ninguém toca na página geralmente significa um cronômetro, uma animação baseada em JavaScript ou uma estrutura re-renderizando mais do que deveria - exatamente as coisas que esgotam as baterias e fazem as páginas travarem.
Elementos com clique, foco, rolagem, toque, teclado e listeners de formulário são contornados em sua própria cor, com blocos para mostrar ou ocultar cada tipo.
Atributos inline, propriedades on-properties, manipuladores React e Vue, eventos jQuery e chamadas addEventListener, rotulados em cada elemento.
listeners de nível raiz do React são deixados de lado e seus manipuladores são mostrados nos elementos que os declaram, e não no aplicativo inteiro.
Reload & record captura cada chamada addEventListener desde o início do carregamento de uma página, incluindo listeners window e document, apenas para esse carregamento.
Nós adicionados e removidos, alterações de atributos e alterações de texto piscam na página, com um contador de mutações por segundo.
Uma lista classificada dos elementos que mais mudam, com os atributos envolvidos, aponta diretamente para re-renderizações descontroladas.
Veja rapidamente se um botão realmente tem um listener ou se o manipulador fica em um elemento wrapper.
Encontre todos os elementos que ouvem scroll, wheel ou touchmove, incluindo listeners em window e document.
Verifique quais controles respondem aos eventos do teclado e quais respondem apenas ao mouse.
Observe o contador de mutações enquanto a página está inativa; elementos que estão sempre mudando apontam para um cronômetro ou estrutura fazendo trabalho extra.
Passe o mouse sobre um site desconhecido para ver quais partes são interativas e qual estrutura as conectou.
Clique no ícone Event Listeners no dock do DevSuite Pro. Uma verificação rápida é executada imediatamente e descreve cada elemento encontrado.
Passe o mouse sobre qualquer elemento destacado para ver seus eventos e suas fontes. Use os blocos de categoria para mostrar apenas listeners de clique, foco ou rolagem.
Pressione Reload & record para recarregar a página uma vez com a gravação ativada. A ferramenta reabre sozinha e agora inclui todas as chamadas addEventListener.
Clique em uma linha na lista para rolar a página até esse elemento e atualizá-lo. Copy report fornece a lista completa como texto.
Abra a guia DOM mutations e use a página. Os elementos em mudança piscam e os mais movimentados sobem ao topo da lista.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 74 ferramentas de desenvolvedor para seu navegador.
