Usando o Chrome, como descobrir a quais eventos estão vinculados a um elemento

Vamos supor que eu tenha um link na minha página:

<a href="#" id="foo">Click Here</a>

Não sei mais nada, mas quando clico no link, um alert("bar")é exibido. Então eu sei que em algum lugar, algum código está sendo vinculado #foo.

Como posso encontrar o código que está vinculando o alert("bar")evento click? Estou procurando uma solução com o Chrome.

Obs .: O exemplo é fictício, portanto, não estou procurando uma solução como: "Use XXXXXX e pesquise em todo o projeto" alert (\ "bar \") "). Quero uma solução real de depuração / rastreamento.

Usando o Chrome 15.0.865.0 dev . Há uma seção "Ouvintes de eventos" no painel Elementos:

E um "Pontos de interrupção de ouvintes de eventos" no painel Scripts. Use o mouse -> clique no ponto de interrupção e, em seguida, "avance para a próxima chamada de função", mantendo um olho na pilha de chamadas para ver qual função da terra do usuário lida com o evento. Idealmente, você substituiria a versão minificada do jQuery por uma versão não minificada, para que você não precise intervir o tempo todo e utilizá -la sempre que possível.

Você também pode usar o inspetor do Chrome para encontrar eventos anexados de outra maneira, da seguinte maneira:

1. Clique com o botão direito do mouse no elemento a ser inspecionado ou encontre-o no painel 'Elementos'.
2. Em seguida, na guia / painel 'Event Listeners', expanda o evento (por exemplo, 'clique')
3. Expanda os vários subnós para encontrar o que você deseja e, em seguida, procure onde está o subnó 'manipulador'.
4. Clique com o botão direito do mouse na palavra 'função' e clique em 'Mostrar definição da função'

Isso levará você ao local onde o manipulador foi definido, conforme demonstrado na imagem a seguir, e explicado por Paul Irish aqui: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Experimente a extensão do jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), depois de instalar, siga estas etapas:

1. Inspecione o elemento
2. Na nova guia ' jQuery Audit ' expanda a propriedade Events
3. Escolha o evento que você precisa
4. Na propriedade manipulador, clique com o botão direito do mouse na função e selecione ' Mostrar definição da função '
5. Agora você verá o código de associação de eventos
6. Clique no botão ' Impressão bonita ' para uma visualização mais legível do código

(Mais recente a partir de 2020) Para a versão Chrome Versão 83.0.4103.61 :

1. Selecione o elemento que você deseja inspecionar

2. Escolha a guia Event Listeners

3. Verifique os ouvintes do Framework para mostrar o arquivo javascript real em vez da função jquery.

Edit : em vez de minha própria resposta, esta é excelente: Como depurar ligações de eventos JavaScript / jQuery com Firebug (ou ferramenta similar)

As ferramentas de desenvolvedor do Google Chromes têm uma função de pesquisa incorporada na seção de scripts

Se você não estiver familiarizado com esta ferramenta: (apenas no caso)

• clique com o botão direito do mouse em qualquer lugar da página (no chrome)
• clique em 'Inspecionar elemento'
• clique na guia 'Scripts'
• Barra de pesquisa no canto superior direito

Fazer uma pesquisa rápida pelo #ID deve levá-lo à função de ligação eventualmente.

Ex: pesquisar #foolevaria você para

$('#foo').click(function(){ alert('bar'); })

Atualização de 2018 - Pode ser útil para futuros leitores:

Não tenho certeza de quando isso foi originalmente introduzido no Chrome. Mas outra maneira (fácil) de fazer isso agora no Chrome é através de comandos do console.

Por exemplo: ( no tipo de console chrome )

getEventListeners($0)

Enquanto $ 0 é o elemento selecionado no DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

findEventHandlers é um plugin jquery, o código bruto está aqui: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Passos

1. Cole o código bruto diretamente no console do chrome (nota: o jquery já deve estar carregado)

2. Use a seguinte chamada de função: findEventHandlers(eventType, selector);
   para localizar o manipulador eventType do elemento especificado do seletor correspondente.

Exemplo :

findEventHandlers("click", "#clickThis");

Se houver, o manipulador de eventos disponível será exibido abaixo. Você precisa expandir para encontrar o manipulador, clique com o botão direito do mouse na função e selecione show function definition

Veja: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Para a versão 52.0.2743.116 do Chrome:

1. Nas Ferramentas de desenvolvedor do Chrome, abra o painel 'Pesquisar' pressionando Ctrl+ Shift+ F.

2. Digite o nome do elemento que você está tentando encontrar.

Os resultados para elementos vinculados devem aparecer no painel e indicar o arquivo em que estão localizados.