Pregunta Realizar un seguimiento de los eventos con Chrome javascript depurador


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?

Entonces, por ejemplo, un evento puede existir en una estructura algo así como

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

Ahora no sé si el evento está vinculado al img, span, li, ul o div. 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?


32
2017-08-14 02:56


origen


Respuestas:


¡sí hay!

encuentre el elemento que se está recargando y haga clic derecho, elegir inspeccionar desde el menú contextual, a continuación, haga clic derecho en el html del elemento (en el panel inferior de Firebugish), en el menú contextual hay opciones para:

  • romper en las modificaciones del subárbol
  • romper con las modificaciones de los atributos
  • romper en la eliminación del nodo

Artículo sobre las nuevas funciones de desarrollo en Chrome: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/


39
2017-08-14 03:02



Si tiene acceso a .js, simplemente agregue "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.


7
2018-01-22 06:23



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 de los árboles secundarios. O también puedes ir a chrome //: seguimiento


0
2017-12-14 04:24