4

Quando desejo depurar um evento associado a um elemento via jQuery, atualmente, consigo fazer das seguintes formas:

  • no Chrome, é possível ativar o depurador especificamente para certos tipos de eventos. No entanto, isso não tem utilidade quando se é necessário depurar alguma coisa em outros navegadores;

  • colocar uma instrução debugger na primeira linha de código de um evento ativa o depurador naquele ponto, mas é inconveniente fazê-lo para cada evento. Além disso, para casos nos quais vou depurar código alheio, ainda há o trabalho de se obter todos os eventos - que podem ser associados e desassociados (amarrados/desamarrados?) dinamicamente.

  • Força bruta. Por exemplo, para um evento de clique:

    function debugClick (elem) {
        debugger;
        $(elem).click();
    }
    

Esse último exemplo faz com que eu me sinta mal comigo mesmo.

Existe alguma forma mais elegante e cross browser de se depurar os eventos de um elemento?

2 Respostas 2

2

As ferramentas de desenvolvimento do Chrome são uma excelente ajuda para encontrar os event handlers .

Infelizmente, quando se trata de jQuery, o event handler que é exibido é o do jQuery e não aquele que registamos (o jQuery adiciona alguma funcionalidade e é por isso que vemos o handler do jquery em vez do nosso).

Podemos aceder ao nosso handler da seguinte forma:

$._data($("#idDoElemento").get(0), "events")

Como alternativa existe um pequeno script (disclaimer: sou o dono desse projecto) que permite usar um selector jQuery para encontrar os eventos em que estamos interessados, por examplo, escrevendo na consola do chrome depois de importar findHandlersJS

findEventHandlers("click", "*")

Retorna todos os event handlers para clicks em qualquer tipo de elemento na pagina que estamos.

Outro exemplo:

findEventHandlers("click", "div#items :button")

retorna todos os event handlers para clique nos botões dentro do div com id="items"

Mais informação sobre findHandlersJS aqui(esta em inglês).

E aqui podem encontrar um site exemplo com o findHandlersJS instalado e pronto para usar na consola do chrome.

2

Você pode debuggar ou pausar eventos de clique com a aba Event Listeners do ChromeDev Tools:

inserir a descrição da imagem aqui

Clique aqui para ver a imagem em tamanho maior

1
  • Eu gosto dessa resposta, mas é exatamente o que eu mencionei como a primeira das minhas alternativas ("no Chrome, é possível ativar o depurador especificamente para certos tipos de eventos"). Mesmo assim, +1 por elaborar sobre como fazer isso, pra servir de referência para quem ler a pergunta. Commented 29/01/2014 às 14:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .