Como faço para visualizar events acionados em um elemento no Chrome DevTools?

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

Como faço isso usando o Chrome Web Developer?

  • Bata F12 para abrir Dev Tools
  • Clique na guia Fontes
  • No lado direito, role para baixo até “Pontos de interrupção do listener de events” e expanda a tree
  • Clique nos events que você deseja ouvir.
  • Interagir com o elemento de destino, se eles triggersrem, você receberá um ponto de interrupção no depurador

Da mesma forma, você pode clicar com o botão direito do mouse no elemento de destino -> select “inspecionar elemento” Role para baixo no lado direito do quadro de desenvolvimento, na parte inferior está “ouvintes de evento”. Expanda a tree para ver quais events estão anexados ao elemento. Não tenho certeza se isso funciona para events que são manipulados por meio de borbulhamento (suponho que não)

Você pode usar a function monitorEvents .

Basta inspecionar seu elemento ( right mouse clickInspect elemento visível ou vá para a guia Elements nas Ferramentas do desenvolvedor do Google Chrome e selecione o elemento desejado), em seguida, vá para a guia Console e escreva:

 monitorEvents($0) 

Agora, quando você move o mouse sobre esse elemento, foque ou clique nele, o nome do evento triggersdo será exibido com seus dados.

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

 unmonitorEvents($0) 

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

Você também pode especificar o “tipo” de evento como segundo parâmetro para restringir events monitorados a algum conjunto predefinido. Por exemplo:

 monitorEvents(document.body, 'mouse') 

A lista desses tipos disponíveis está aqui .

Eu fiz um pequeno gif que ilustra como esse recurso funciona:

uso da função monitorEvents

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

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

  1. Clique com o botão direito no elemento e abra “Ferramentas do desenvolvedor do Google Chrome”
  2. Digite $._data(($0), 'events'); no ‘Console’
  3. Expanda os objects anexados e clique duas vezes no handler: value.
  4. Isso mostra o código-fonte da function anexada, pesquise parte dela usando a guia “Pesquisar”.

E é hora de parar de reinventar a roda e começar a usar os events baunilha JS … 🙂

função how-to-find-jquery-click-handler

Isso não mostrará events 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 do desenvolvedor do Google Chrome não mostrará “algo: evento-personalizado-um”