Como vejo eventos disparados em um elemento no Chrome DevTools?

603

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?

John Hoffman
fonte
13
Este bookmarklet pode ser útil: sprymedia.co.uk/article/Visual+Event+2
Scytale
1
A resposta aqui é valiosa, mas o bookmarklet acima ^ é realmente o que resolveu meu problema. sprymedia.co.uk/article/Visual+Event+2
Jazzy

Respostas:

878
  • 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)

Matt
fonte
11
esta solução é um problema se for eventos de mouse que você está depois, como o ponto de interrupção mata o fluxo
WendyG
67
e se todos os eventos apontarem para jquery minificado com o qual não me importo, como chego à função que usa esse jquery.
Muhammad Umer
14
Ele pode mostrar eventos personalizados criados por mim? Quando li que isso mudou vidas, foi a primeira coisa que pensei. Perco alguma coisa?
Tebe
24
@ MuhammadUmer Você pode colocar o jQuery na caixa preta para que o Chrome o ignore e vá direto para o seu código-fonte. developer.chrome.com/devtools/docs/blackboxing
Matt Zeunert 12/02/16
1
@MuhammadUmer e se você parar de usar o JQuery?
John Balvin Arias
831

Você pode usar a função monitorEvents .

Basta inspecionar seu elemento ( right mouse clickInspectno 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:

uso da função monitorEvents

Mariusz Pawelski
fonte
2
Acordado. Essa é a maneira ideal de monitorar e rastrear eventos em elementos específicos .
precisa saber é o seguinte
1
Ah sim, entendo. Foi o "indefinido" que estava me excitando, mas agora vejo que você tem o mesmo no seu útil GIF animado. Obrigado.
MSC
1
qual ferramenta se u usar para fazer gif
JerryGoyal
3
@MariuszPawelski Como proceder a partir daqui? Fiz isso e encontrei o evento click, que era o evento em que me interessava. Mas como encontro o que acontece quando clico no elemento? Que tipo de código é executado? Qual propriedade MouseEventdevo procurar?
Utku
3
mas onde encontrar manipulador, por exemplo, clique em manipulador.
Sheikh Abdul Wahid
26

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 .

tifkin
fonte
22

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 ... :)

como encontrar a função jquery-click-handler

Daniel Sokolowski
fonte
15

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"

airtonix
fonte
21
Como, então, encontramos esses eventos?
Calydon #