Como vejo eventos disparados em um elemento no Chrome DevTools?

Eu tenho um elemento de formulário personalizável em uma página de uma biblioteca. Quero ver quais eventos javascript são disparados quando interajo com ele, porque estou tentando descobrir qual manipulador de eventos usar.

Como faço isso usando o Chrome Web Developer?

• Clique F12para abrir as Ferramentas de Desenvolvimento
• Clique na guia Origens
• No lado direito, role para baixo até "Event Listener Breakpoints" e expanda a árvore
• Clique nos eventos que deseja ouvir.
• Interaja com o elemento de destino; se dispararem, você obterá um ponto de interrupção no depurador

Da mesma forma, você pode clicar com o botão direito do mouse no elemento de destino -> selecionar "inspecionar elemento" Role para baixo no lado direito do quadro de desenvolvimento, na parte inferior é 'ouvintes de eventos'. Expanda a árvore para ver quais eventos estão anexados ao elemento. Não tenho certeza se isso funciona para eventos que são tratados com bolhas (acho que não)

Você pode usar a função monitorEvents .

Basta inspecionar seu elemento ( right mouse click→ Inspectno elemento visível ou vá para a Elementsguia Ferramentas do desenvolvedor do Chrome e selecione o elemento desejado), depois vá para a Consoleguia e escreva:

monitorEvents($0)

Agora, quando você passa o mouse sobre esse elemento, focaliza ou clica nele, o nome do evento disparado será exibido com seus dados.

Para parar de obter esses dados, basta escrever no console:

unmonitorEvents($0)

$0é apenas o último elemento DOM selecionado pelas Ferramentas do desenvolvedor do Chrome. Você pode passar qualquer outro objeto DOM para lá (por exemplo, resultado de getElementByIdou querySelector).

Você também pode especificar o "tipo" de evento como segundo parâmetro para restringir os eventos monitorados a um conjunto predefinido. Por exemplo:

monitorEvents(document.body, 'mouse')

A lista desses tipos disponíveis está aqui .

Fiz um pequeno gif que ilustra como esse recurso funciona:

O Visual Event é um ótimo bookmarklet que você pode usar para exibir os manipuladores de eventos de um elemento. Na demonstração on-line pode ser visto aqui .

Para o jQuery (pelo menos a versão 1.11.2), o procedimento a seguir funcionou para mim.

1. Clique com o botão direito do mouse no elemento e abra 'Ferramentas do desenvolvedor do Chrome'
2. Digite $._data(($0), 'events');o 'Console'
3. Expanda os objetos anexados e clique duas vezes no handler:valor.
4. Isso mostra o código-fonte da função anexada, procure parte dela usando a guia 'Pesquisar'.

E é hora de parar de reinventar a roda e começar a usar eventos JS vanilla ... :)

Isso não mostrará eventos personalizados, como aqueles que seu script pode criar, se for um plugin jquery. por exemplo :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

O Painel de Eventos em Scripts nas ferramentas de desenvolvedor do Chrome não mostrará "Algo: evento personalizado um"