Tengo ~ 100-200 funciones de javascript cargadas en un sitio web. Quiero determinar qué función javascript se ejecuta cuando hago clic en un elemento u otro en Google Chrome. ¿Cómo puedo hacerlo con las herramientas para desarrolladores web de Chrome? Gracias!Seguimiento de ejecución de JavaScript en Chrome: ¿cómo?
Un enfoque simple es iniciar Herramientas de desarrollador de Chrome, cambiar al panel Orígenes y pulsar F8 (Pausar ejecución). Esto se romperá en la primera instrucción de JavaScript ejecutada.
Otro enfoque es establecer un punto de interrupción de escucha de evento para mousedown o hacer clic: en el mismo panel de Fuentes, expanda los "Puntos de interrupción de escucha de evento" en la barra lateral de la derecha. Expande el elemento "Mouse" y verifica los eventos que deseas romper (por ejemplo, "clic", "mousedown"). Luego, haga clic en su página y vea el salto de ejecución de JS en DevTools. ¡Disfrutar!
Quiero determinar qué función javascript se ejecuta cuando hago clic en un elemento u otro en Google Chrome.
Ahora hay una gran extensión llamada Visual Event que hace exactamente eso. Solo reconoce los manejadores de eventos establecidos a través de las populares bibliotecas js (jQuery, YUI, MooTools, Prototype, Glow) y los eventos DOM Nivel 0.
funciona bien. No estoy seguro acerca de la seguridad, así que lo dejo cuando no estoy depurando. – MagicLAMP
Una alternativa a la pausa de ejecución (que por lo general funciona muy bien, pero no funciona bien en las páginas que con frecuencia ejecutar código periódica)
Puede utilizar perfiles de Chrome para grabar durante un corto período de tiempo. Después de que termine de grabar, le mostrará un resumen del tiempo de CPU gastado en cualquiera de las funciones que se ejecutaron durante la grabación. Realmente no nos importa el tiempo de CPU, solo estábamos usando esta herramienta porque nos mostrará qué funciones se ejecutaron.
Básicamente, sólo empezar a grabar:
A continuación, realice su acción (por ejemplo, haga clic en un botón en la página web, o hacer lo que hará que el código interesante para ejecutar). Y luego se detiene la grabación y ver el resultado:
Aviso estoy usando "arriba hacia abajo" Modo de imagen - que muestra la pila de llamadas, y se puede profundizar para ver que funciona finalmente nos llama. Por ejemplo, se llamó primero a alguna función anónima (probablemente como resultado de setTimeout o tal vez a algún controlador de evento click), y luego llamó a algún método identificado por s.track.s.t que luego llamó a s_doPlugins y así sucesivamente ... Lo importante es que en la parte superior modo abajo, las entradas en la parte superior del árbol forman el inicio de una pila de llamadas, por lo que suelen ser una función registrada por alguna función de temporizador (setTimeout, setInterval, requestAnimationFrame, etc.) o algún controlador de eventos (click , mousemove, load, etc.).
También puede usar el modo de visualización "gráfico", que le muestra a qué función se llamó y en qué momento, trazada en un gráfico de izquierda a derecha. Esto le ayuda a identificar qué función realmente está buscando porque probablemente tenga una idea de a qué hora se ejecutó el código dentro de su grabación (por ejemplo, justo en el medio).
btw - Creo que la mayoría de los otros navegadores modernos tienen capacidades similares.
¡mucho! ¿Qué evento de mouse debería atrapar si selecciono texto en FCKeditor, "clic con el botón izquierdo del mouse", muevo el mouse a otro lugar y lo suelto? – Pave
"mouseup", quizás. No estoy familiarizado con el FCKeditor, sin embargo. –
Lo intenté, pero ... todavía no funciona ... Voy a intentarlo. ¡Gracias! – Pave