2010-04-18 9 views
9

Vengo de fondo Java y por lo utiliza para depuración utilizando Eclipse, pero recientemente han comenzado en JavaScript (jQuery en particular) y estoy teniendo momento muy difícil depurar código JavaScript por lo que mi pregunta esdepuración de JavaScript

¿Cuáles son las mejores formas de depurar JavaScript?

He intentado usar Firebug y es bueno, pero quería saber

Si tiene cualquier otro tipo de herramientas útiles o stratergies para la depuración de JavaScript?

Respuesta

8

Recientemente cambié de Firebug a Google Chrome ya que tiene algunas herramientas de depuración bastante potentes integradas (Ctrl + Shift + J para abrir la ventana Herramientas del desarrollador), incluidos los puntos de interrupción.

También he usado el registro/seguimiento con gran efecto. Algunos ejemplos:

  • Cuando el código se ejecuta sin errores de sintaxis, pero no hace lo que espero, puedo registrar mensajes (por ejemplo, "here1", "aquí2", etc.) a la consola para ver lo que está pasando (También se puede hacer al avanzar con el depurador, pero eso puede ser más difícil si su lógica está en algún bucle loco o algo que demora un poco en salir).
  • Cuando la naturaleza de bloqueo de un cuadro de alerta o un punto de interrupción rompería el código que estoy depurando. Esto sucede mucho cuando tengo varios intervalos de temporizador establecidos. Los cuadros de alerta también son dolorosos de usar en bucles largos (y los puntos de interrupción también pueden serlo).
  • Cuando quiero ver qué valor tiene una determinada variable en un punto del código. Si se trata de algo de una sola vez, los puntos de interrupción son geniales para esto (mejor, incluso, porque puedo verificar el valor de cualquier variable en ese contexto), pero si ese código se ejecuta con frecuencia y solo me importa, por ejemplo, el tercero el tiempo se ejecuta después de hacer clic en un cierto enlace, luego el registro es muy útil. Puedo ignorar la salida que no quiero (o borrar si está en el camino) y concentrarme solo en la salida que me interesa.
+1

¿Cómo se usa el registro y el seguimiento con gran efecto? ¿Puedes elaborar un poco más sobre esto? – Rachel

+0

Firebug también tiene todas esas cosas. Puede poner puntos de ruptura, registro y rastreo también. – Rajat

+0

@Rajat: Firebug tiene todas esas cosas, pero he descubierto que la experiencia general en Chrome es mucho más sencilla. Me gusta más la IU. Esta es, por supuesto, una opinión personal muy subjetiva :-) – Cameron

0

Uno de mis colegas (que hace una gran cantidad de desarrollo de JS en varios navegadores) reconoce que el depurador en IE8 es muy bueno. Además, el último Firebug para Firefox 3.6 es una mejora considerable en comparación con las versiones anteriores.

EDIT Un poco fuera de tema, pero una cosa que me molestó con Firebug fue la virtual ausencia de documentación escrita. Lo siento, pero las presentaciones de video simplemente no funcionan, en lo que a mí respecta.

+0

¿Puede elaborar el depurador en IE8 y cómo se puede depurar para la compatibilidad con varios navegadores? – Rachel

+1

El depurador de IE es para encontrar comas finales en su código JS :) –

+0

@Rachel - no hay atajos. Debe probar sus páginas web en todos y cada uno de los navegadores que admite. Afortunadamente, JQuery se ocupará de la mayoría de los problemas de portabilidad. –

0

Subjetivo, porque lo que es mejor para uno no es lo mejor para los demás.

Personalmente, el método más fácil/rápido es usar alertas o escribir en un área de salida de depuración (es decir, no me molesto con Firebug o algún sistema con puntos de interrupción, etc., debido a la naturaleza del JavaScript es generado).

Pero probablemente solo lo encuentro así porque lo he estado haciendo durante 10 años, por lo que YMMV.

+1

@silky - ¿subjetivo? ¿o tienes razón para promocionar alertas como una herramienta de depuración en 2010? ;-) Admito que los uso a veces, pero no en público. –

+0

@Sky Sanders: creo que es la forma más rápida de hacerlo, la mayoría de las veces. En mi humilde opinión, demasiadas personas están unidas a su depurador. Pero es relativamente inútil discutir sobre esto: a cada uno lo suyo. –

0

Realmente disfruto el JavaScript inteligente de Visual Studio y la depuración. Es agradable poder depurar el paso de un evento javascript, a un XMLHttpRequest a la derecha en mi controlador .net.

Otro aspecto realmente agradable del uso de VWD es la visualización de depuración. Puede desplazarse sobre cualquier objeto/var e invocar un visualizador que le permitirá profundizar en el objeto y examinar los valores.

Además, puntos de interrupción condicional, ventanas de reloj. En otras palabras, obtienes un gran subconjunto de las capacidades de depuración de .net para JavaScript.

Visual Web Developer Express es gratuito y ofrece todo esto.

+0

¿Pero se puede usar para depurar cualquier página web arbitraria, o solo las creadas en Web Developer? – Cameron

+0

¿Cómo puedo depurar una página ya creada usando Visual Web Developer? ¿Es posible o solo para páginas desarrolladas usando Web Developer? – Rachel

+0

@Cameron VWD es un IDE. Cree un proyecto, agregue su html y javascript, establezca puntos de corte y presione F5. De dónde vienen los html y javascript de origen es una pista falsa, solo necesita ejecutarlos desde VWD para aprovechar la depuración. –

1

Los navegadores modernos incluyen herramientas de depuración integradas. En IE, presione F12 (Herramientas > Developer Tools), vaya a la pestaña Script y presione Iniciar depuración. Rompe con un error y puede establecer puntos de interrupción. Descubrí que las herramientas para desarrolladores de IE8 son extremadamente útiles.

En Chrome, es Ctrl + Shift + J (Página > Developer > JS Console) y haga clic en el botón Pause Stop Sign ("pausa en excepciones"). También puede establecer puntos de interrupción.

+0

¿Tenemos algo similar para Firefox? – Rachel

+1

Creo que Firebug le ofrece capacidades de depuración en Firefox. – josh3736

+0

eso es correcto. –

0

En su mayoría desarrollo para Firefox, por lo que estoy dispuesto a utilizar herramientas en esa plataforma.

Me gusta mucho Venkman JavaScript Debugger, pero no es compatible con las versiones más recientes de FireFox AFAIK.

Como han dicho otros, Firebug es, básicamente, los go-to-herramienta para la mayoría de la gente en estos días ...

Yo diría que familiarizarse con al menos una herramienta en cada uno de los principales navegadores, a continuación, elegir cualquiera que sea su el favorito es usar como su herramienta "principal", usando los otros solo para rastrear problemas en sus respectivas plataformas.

1

Raramente utilizo un depurador y prefiero el registro, para lo cual utilizo mi propio log4javascript. Funciona de manera consistente en todos los navegadores mainstream, incluido IE 6 (y de hecho IE 5 y 5.5), y de forma predeterminada muestra mensajes de registro en una ventana de consola separada, que le permite filtrar mensajes de registro por gravedad, mensajes de registro de búsqueda (opcionalmente usando un expresión regular) y más. También puede enviar mensajes de registro al servidor utilizando Ajax.

Ejemplo 1: Hola mundo

var log = log4javascript.getDefaultLogger(); 
log.info("Hello world"); 

displays

19:52:03 INFO - Hello world 

Ejemplo 2: Adquisición de un error con un mensaje

try { 
    throw new Error("Faking something going wrong!"); 
} catch (e) { 
    log.error("An error occurred", e); 
} 

displays

19:52:32 ERROR - An error occurred 
Exception: Faking something going wrong! on line number 80 in file basic.html 

Ejemplo 3: Registro de múltiples mensajes con una llamada de registro de

var a = "Hello"; 
var b = 3; 
log.debug(a, b); 

displays

19:53:05 DEBUG - Hello 3 

Ejemplo 4: Registro de un objeto

var obj = new Object(); 
obj.name = "Octopus"; 
obj.tentacles = 8; 
log.info(obj); 

pantallas

19:53:17 INFO - { 
    name: Octopus, 
    tentacles: 8 
} 
Cuestiones relacionadas