Depuración de eventos de JavaScript con Firebug

Question

Necesito establecer un punto de interrupción para cierto evento, pero no sé dónde está definido, porque tengo una gran cantidad de código JavaScript minimizado, así que no puedo encontrarlo manualmente .

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

he encontrado el complemento de Firefox Javascript Deobfuscator, que muestra actualmente ejecuta JavaScript, lo cual es bueno, pero el código que necesito de depuración está utilizando jQuery, así que hay un montón de llamadas de funciones, incluso en el caso más simple , así que tampoco puedo usar eso.

¿Hay algún depurador hecho especialmente para jQuery?

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

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

Answer 1

bien todo podía ser demasiado problema de lo que vale, pero parece que usted tiene que hacer tres cosas:

1. De-Minify la fuente. Me gusta this online tool para un rápido y sucio. Simplemente pegue su código y haga clic en el botón. Nunca me ha fallado, incluso en el más funky de JavaScript.

2. Todos jQuery carpetas del acontecimiento son enrutados a "jQuery.event.add" (here's what it looks like in the unbuilt source), por lo que necesita para encontrar ese método y establecer un punto de interrupción allí.

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

Tenga en cuenta que 3) requiere Firebug para FF3. Si usted es como yo y prefieren a depurar con Firebug para FF2, puede utilizar el método arguments.callee.caller.toString() antigua para la inspección de la pila de llamadas, la inserción de la mayor cantidad ".caller "s según sea necesario

---

Editar:. Además, ver "How to debug Javascript/jQuery event bindings with FireBug (or similar tool)".

Usted puede ser capaz de salirse con la suya:

// 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 caso, y sólo se puede iniciar la caza que en su fuente, en contraposición a tratar de establecer punto de interrupción en la fuente de jQuery.

Answer 2

Puede utilizar el comando debugger cualquier parte de un archivo JavaScript. Cuando el intérprete responde esa declaración, si hay un depurador disponible (como Firebug), se activa

Answer 3

Primero reemplace jquery minificado o cualquier otra fuente que utilice con formateado. Otro truco útil que encontré es usar Profiler 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 4

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

Answer 5

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

A continuación, descargue e instale Fiddler: todos los desarrolladores web deben tener esta increíble herramienta instalada.

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

Fiddler básicamente intercepta la solicitud de su navegador para un archivo específico y puede servir un archivo diferente a su navegador. Entonces ahora puedes mirar el código no minificado.

Fácil.

Otra opción es utilizar Firefox y obtener el depurador Venkman instalado en él, mucho mejor que Firebug en mi humilde opinión, y el depurador Venkman tiene una opción de "impresión bonita" que puede minimizar visualmente el código minificado en tiempo de ejecución. Se adhieren a su punto de equilibrio donde quiera que quiere ahora ...

Answer 6

Apenas una actualización:

Google Chrome (las herramientas dev en ella) admiten todo tipo de puntos de ruptura, junto con descanso en Evento.

Todo eventos junto con la orientación del dispositivo cambios y temporizadores

Se puede ver a video con una presentación de todas las capacidades de Google IO.

Hay también incorporado en deminifier/unminimizer/prettifier que le ayudará a establecer puntos de corte manualmente en archivos javascript comprimidos.

Answer 7

Otra actualización: Ahora hay una extensión 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 este answer por detectarlo.

Answer 8

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