2011-08-14 21 views
32

No tengo un caso de uso específico aquí, pero ocasionalmente he estado ayudando a alguien en SO o he visto un efecto de JavaScript en un sitio web y he tenido curiosidad sobre el código que lo impulsa. Sin embargo, el evento que maneja el código puede no ser inmediatamente obvio. Si no puedo encontrar el controlador de eventos, puede ser realmente difícil encontrar al js responsable de los efectos que me interesan. ¿Hay alguna manera rápida en el depurador para identificar los eventos asociados a un elemento y eliminar un punto de quiebre? cuando se dispara?Realizar un seguimiento de eventos con depurador JavaScript de Chrome

Así, por ejemplo, puede existir un evento en una estructura algo así como lo que

<div> 
    <ul> 
    <li><span><img /></span></li> 
    </ul> 
</div> 

Ahora bien, no sé si el evento está ligado a la IMG, palmo, li, ul o div sí. Chrome tiene el área de escuchas de eventos, pero creo que no siempre contiene eventos. ¿Algo que ustedes hagan eso les permite encontrar rápidamente el evento y dejar caer un punto de quiebre en él?

Respuesta

39

sí, hay!

encontrar el elemento que se vuelve a cargar y haga clic derecho, elegir inspeccionar desde el menú contextual, continuación, haga clic derecho en el HTML del elemento (en el panel firebugish inferior), en el menú de contexto hay opciones para:

  • descanso en subárbol modificaciones
  • descanso en atributos modificaciones
  • descanso en la extirpación de ganglios

artículo sobre las nuevas características impresionantes dev en cromo: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

+1

Me encanta el artículo vinculado! –

+0

+1 IMPRESIONANTE. ¿No odias cuando has usado una herramienta durante años solo para que te enseñen sobre ella? lol. – cbmeeks

+0

Aunque veo que asker ha aceptado esta respuesta, cuando leí la pregunta por primera vez, mi impresión fue que estaba buscando algo así como "Log Events" en Firebug, que registra eventos en la consola incluso para elementos que no tienen controladores. adjunto explícitamente usando JS (incluidos los elementos cuyos elementos secundarios sí los tienen). No he encontrado nada parecido para Chrome, y la extensión Chrome Firebug Lite tampoco lo tiene. ¿Alguien sabe una alternativa? – ack

7

Si usted tiene acceso a los js, sólo tiene que añadir "depurador"; en su propia línea. Cada vez que Chrome (o FF) lo haga, activará el depurador y te permitirá avanzar. Es útil si tienes alguna idea general sobre qué código desencadenará el evento. Ver http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/ para más.

+0

Depurador! Impresionante ... Lo necesitaba hace un tiempo para JS dinámico ... – ppumkin

0

Haga clic con el botón derecho en el elemento en las herramientas chrome dev, y haga clic en 'break on', luego verá múltiples selecciones, como las modificaciones del árbol secundario. O también puede ir a chrome //: seguimiento

Cuestiones relacionadas