online - Depuración de eventos JavaScript con Firebug

modo debug chrome

Question

Necesito establecer un punto de interrupción para cierto evento, pero no sé dónde está definido, porque tengo un montón gigante de código JavaScript minimizado, por lo que no puedo encontrarlo manualmente.

¿Es posible establecer de alguna manera un punto de interrupción para, por ejemplo, el evento de clic de un elemento con ID registerButton , o encontrar en algún lugar qué función está vinculada a ese evento?

Encontré el complemento de Firefox Javascript Deobfuscator , que muestra el JavaScript ejecutado actualmente, lo cual es bueno, pero el código que necesito para depurar está usando jQuery , por lo que hay muchas llamadas a funciones incluso en el evento más simple, así que no puedo usar eso ya sea.

¿Hay algún depurador hecho especialmente para jQuery ?

¿Alguien sabe alguna herramienta que convierte a JavaScript minified de nuevo en un código formateado como la function(){alert("aaa");v=3;} giro function(){alert("aaa");v=3;} nuevo en

function() {
   alert("aaa");
   v = 3;
}

Answer 1

Bueno, todo puede ser demasiado problemático de lo que vale, pero parece que tienes tres cosas que hacer:

1. De-minificar la fuente. Me gusta esta herramienta en línea para un rápido y sucio. Simplemente pegue su código y haga clic en el botón. Nunca me ha fallado, ni siquiera en el JavaScript más funky.

2. Todos los enlazadores de eventos jQuery se enrutan a "jQuery.event.add" ( esto es lo que parece en la fuente no compilada ), por lo que debe encontrar ese método y establecer un punto de interrupción allí.

3. Si ha llegado hasta aquí, todo lo que debe hacer es inspeccionar la pila de llamadas en el punto de interrupción para ver quién llamó a qué. Tenga en cuenta que, dado que se encuentra en un punto interno de la biblioteca, tendrá que verificar algunos saltos (ya que el código que llama "jQuery.event.add" probablemente fue más que otras funciones de jQuery).

Tenga en cuenta que 3) requiere Firebug para FF3. Si eres como yo y prefieres depurar con Firebug para FF2, puedes usar el método de antiguos arguments.callee.caller.toString() para inspeccionar la pila de llamadas, insertando tantos ".caller " como sea necesario.

Editar : También, vea "Cómo depurar enlaces de eventos Javascript / jQuery con FireBug (o herramienta similar)" .

Usted puede salirse con la suya con:

// inspect    
var clickEvents = jQuery.data($(''#foo'').get(0), "events").click;
jQuery.each(clickEvents, function(key, value) {
    alert(value) // alerts function body
})

El truco anterior le permitirá ver su código de manejo de eventos, y puede comenzar a buscarlo en su fuente, en lugar de intentar establecer un punto de interrupción en la fuente de jQuery.

Answer 2

Encuentra la línea y coloca un punto de interrupción. A continuación, vuelva a cargar el sitio / página. Luego, firebug pausará automáticamente la ejecución de la declaración cuando se alcanza un punto de interrupción.

Answer 3

Esto hará el trabajo. http://jsbeautifier.org/ También puede buscar en Google un embellecedor de javascript.

Answer 4

Lo que podrías hacer es obtener el código minificado: tendrás acceso a esto. Elimine el código según la opción de Crescent Fresh (1) o cualquier método que prefiera.

Luego descargue e instale Fiddler: todos los desarrolladores web deben tener instalada esta increíble herramienta.

Luego, utilizando Fiddler, puede interceptar la llamada del navegador para el archivo minified.js con el archivo unminified.js local que tiene en su disco local.

Básicamente, Fiddler intercepta la solicitud de su navegador para un archivo específico y puede proporcionar un archivo diferente a su navegador. Así que ahora puedes mirar el código no minificado.

Fácil.

Otra opción es usar Firefox y tener instalado el depurador Venkman, mucho mejor que Firebug IMHO, y el depurador Venkman tiene una opción de "impresión bonita" que puede des-minificar visualmente el código minificado en el tiempo de ejecución. Pega tu punto de ruptura donde quieras ahora ...

Answer 5

Otra actualización: ahora hay una extensión de firebug que embellece JavaScript:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Está funcionando perfectamente para mí en Firefox 12.0.

Gracias a esta answer por haberlo visto.

Answer 6

Primero reemplace el jquery minificado o cualquier otra fuente que use con formato. Otro truco útil que encontré es usar el generador de perfiles en firebug. El generador de perfiles muestra qué funciones se están ejecutando y puede hacer clic en una e ir allí para establecer un punto de interrupción.

Answer 7

Puede utilizar el comando del debugger en cualquier lugar en un archivo javascript. Cuando el intérprete llega a esa declaración, si hay un depurador disponible (como Firebug), se activa.

Answer 8

Sólo una actualización:

Google Chrome (las herramientas de desarrollo en él) admite todo tipo de puntos de interrupción, junto con la interrupción en el evento .

Todos los eventos, junto con los cambios de orientación del dispositivo y temporizadores

Puede ver un video con una presentación de todas las capacidades de Google IO .

También hay un desminador / unminimizer / prettifier incorporado que lo ayudará a establecer puntos de interrupción manualmente en archivos javascript comprimidos.