usar triggered monitorevents modo how hacer event debugger debug como chrome jquery javascript-events firebug google-chrome-devtools ie-developer-tools

jquery - triggered - modo debug chrome



Encuentra eventos vinculados/enlazados de un elemento usando Chrome Development Tools/Firebug/IE Developer Toolbar (6)

Al inspeccionar el DOM de una página, me gustaría saber el (los) evento (s) adjunto (s) de un elemento rápidamente

Por ejemplo, si un botón tiene este DOM HTML

<button id="button1">Click Me</button>

Y en algún lugar (no en un lugar que conozco de antemano) tiene un evento adjunto, por ejemplo

$("#button1").click(function(){...});

Sé que se puede hacer programáticamente ( ¿Puedo encontrar eventos vinculados a un elemento con jQuery? )

pero ¿hay alguna manera de usar una de las herramientas de desarrollador para Chrome / Firefox / IE para ver una lista de eventos?

Actualización : descubrí que en las versiones más nuevas de Chrome tengo una pestaña llamada EventListeners, pero parece que no permite una exploración sencilla hasta el origen del evento, ya que jQuery ajusta el original


Ahora hay una pestaña de Escucha de eventos en Chrome.


Con el inspector de Chrome, seleccione el elemento en la pestaña "Elementos" y luego desde la pestaña "Consola" puede ver los eventos asociados al elemento con getEventListeners($0); .



Las herramientas de desarrollador de Firefox ahora muestran un "ev" al lado de los elementos que tienen eventos vinculados. Esto se puede utilizar para inspeccionar eventos enlazados (incluidos los eventos jQuery).

Aquí hay un ejemplo de cómo inspeccionar el elemento "Primer párrafo" de la documentación de jQuery click :


También puede verificar el complemento Visual Event disponible para chrome.


Para obtener el primer controlador adjunto en el primer elemento $ ("# button1")

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

La larga historia que nadie quiere escuchar: vine aquí en busca de un complemento. Estaba emocionado de ver la respuesta de @ schmidlop, pero en jQuery no me da el oyente que estoy buscando, solo muestra el controlador genérico para los eventos jQuery que eventualmente llaman a la devolución de llamada específica. Todavía estoy buscando un complemento de Chrome que me permita hacer clic con el botón derecho en un elemento y permitirme explorar los manejadores conectados al objeto.

Porque eso sería genial.

ACTUALIZACIÓN: Encontré una extensión de Chrome llamada jQuery Debugger. Simplemente "Inspeccione el elemento" y elija "Eventos jQuery" en el submenú "Elementos" ... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi