¿Cómo puedo depurar mi código JavaScript? [cerrado]

Cuando descubro que tengo un fragmento de código problemático, ¿cómo debo depurarlo?

Firebug es una de las herramientas más populares para este propósito.

Todos los navegadores modernos vienen con algún tipo de aplicación de depuración de JavaScript incorporada. Los detalles de estos se cubrirán en las páginas web de tecnologías relevantes. Mi preferencia personal para depurar JavaScript es Firebug en Firefox. No estoy diciendo que Firebug sea mejor que cualquier otro; depende de sus preferencias personales y probablemente debería probar su sitio en todos los navegadores de todos modos (mi primera opción personal es siempre Firebug).

Cubriré algunas de las soluciones de alto nivel a continuación, usando Firebug como ejemplo :

Firefox

Firefox viene con su propia herramienta de depuración de JavaScript incorporada, pero te recomiendo que instales el complemento Firebug . Esto proporciona varias funciones adicionales basadas en la versión básica que son útiles. Solo voy a hablar de Firebug aquí.

Una vez que Firebug está instalado, puede acceder a él como se muestra a continuación:

En primer lugar, si hace clic derecho en cualquier elemento, puede inspeccionar el elemento con Firebug :

Al hacer clic en esto, se abrirá el panel de Firebug en la parte inferior del navegador:

Firebug ofrece varias funciones, pero la que nos interesa es la pestaña del script. Al hacer clic en la pestaña de secuencia de comandos, se abre esta ventana:

Obviamente, para depurar necesitas hacer clic en recargar :

Ahora puede agregar puntos de interrupción haciendo clic en la línea a la izquierda del fragmento de código JavaScript al que desea agregar el punto de interrupción:

Cuando se alcanza su punto de interrupción, se verá a continuación:

También puede agregar variables de observación y, en general, hacer todo lo que esperaría de una herramienta de depuración moderna.

Para obtener más información sobre las diversas opciones que se ofrecen en Firebug, consulte las Preguntas frecuentes de Firebug .

Cromo

Chrome también tiene su propio construido en la opción de depuración de JavaScript, que funciona de manera muy similar, haga clic derecho, inspeccionar elemento, etc . Eche un vistazo a las herramientas para desarrolladores de Chrome . En general, encuentro los rastros de pila en Chrome mejor que Firebug.

explorador de Internet

Si está desarrollando en .NET y utilizando Visual Studio utilizando el entorno de desarrollo web, puede depurar código JavaScript directamente colocando puntos de interrupción, etc. Su código JavaScript se ve exactamente igual que si estuviera depurando su código C # o VB.NET .

Si no tiene esto, Internet Explorer también proporciona todas las herramientas que se muestran arriba. De manera molesta, en lugar de hacer que el clic derecho inspeccione las características del elemento de Chrome o Firefox, accedes a las herramientas de desarrollo presionando F12 . Esta pregunta cubre la mayoría de los puntos.

• Internet Explorer 8 (Herramientas para desarrolladores - F12). Todo lo demás es de segunda categoría en la tierra de Internet Explorer
• Firefox y Firebug . Presione F12para mostrar.
• Safari (Mostrar barra de menú, Preferencias -> Avanzado -> Mostrar barra de menú Desarrollar )
• Consola de JavaScript de Google Chrome ( F12o ( Ctrl+ Shift+ J)). Principalmente el mismo navegador que Safari, pero Safari es mejor en mi humilde opinión.
• Opera ( Herramientas -> Avanzado -> Herramientas de desarrollo )

Hay un depurador palabra clave en JavaScript para depurar el código JavaScript. Poner depurador; fragmento en su código JavaScript. Automáticamente comenzará a depurar el código JavaScript en ese momento.

Por ejemplo:

Suponga que este es su archivo test.js

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

• Cuando el navegador ejecuta la página web en la opción de desarrollador con el depurador habilitado, automáticamente comienza a depurar desde el depurador; punto.
• Debería estar abierta la ventana del desarrollador del navegador.

Utilizo un buen printfenfoque antiguo (una técnica antigua que funcionará bien en cualquier momento).

Mira a la magia %o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%ovolcar contenido de objeto JS en el que se puede hacer clic y navegar en profundidad, con una impresión bonita . %sse mostró solo para un registro.

Y esto:

console.log("%s", new Error().stack);

le brinda un seguimiento de pila similar a Java hasta el punto de new Error()invocación (incluida la ruta al archivo y el número de línea ).

Ambos %oy new Error().stackdisponibles en Chrome y Firefox.

Con herramientas tan poderosas, usted asume qué va mal en su JS, coloca la salida de depuración (no se olvide de ajustar la ifdeclaración para reducir la cantidad de datos) y verifique su suposición. Solucione el problema o realice una nueva suposición o ponga más salida de depuración al problema de bits.

También para el uso de rastros de pila:

console.trace();

como dice Console

¡Feliz piratería!

Comience con Firebug e IE Debugger.

Sin embargo, tenga cuidado con los depuradores en JavaScript. De vez en cuando, afectarán al entorno lo suficiente como para causar algunos de los errores que está intentando depurar.

Ejemplos:

Para Internet Explorer, generalmente es una desaceleración gradual y es una especie de trato de tipo fuga de memoria. Después de una media hora, necesito reiniciar. Parece ser bastante regular.

Para Firebug, probablemente ha pasado más de un año, por lo que puede haber sido una versión anterior. Como resultado, no recuerdo los detalles, pero básicamente el código no se estaba ejecutando correctamente y después de intentar depurarlo por un tiempo, desactivé Firebug y el código funcionó bien.

Aunque alert(msg);funciona en esos escenarios "Solo quiero saber qué está pasando" ... cada desarrolladores se han encontrado con ese caso en el que terminas en un bucle (muy grande o interminable) del que no puedes salir.

Recomendaría que durante el desarrollo, si desea una opción de depuración muy directa, use una opción de depuración que le permita salir. (PS Opera, Safari? Y Chrome? Todos tienen esto disponible en sus diálogos nativos)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

Con lo anterior, puede meterse en un gran bucle de depuración emergente, donde presionar Enter/ le Okpermite saltar a través de cada mensaje, pero presionar Escape/ le Cancelpermite salir bien.

Utilizo el menú / consola de desarrollador de WebKit (Safari 4). Es casi idéntico a Firebug.

console.log()es el nuevo negro - mucho mejor que alert().

Mi primer paso es siempre validar el HTML y verificar la sintaxis con JSLint . Si tiene un marcado limpio y un código JavaScript válido, entonces es hora de Firebug u otro depurador.

Visual Studio 2008 tiene algunas herramientas de depuración de JavaScript muy buenas. Puede colocar un punto de interrupción en el código JavaScript del lado del cliente y recorrerlo utilizando exactamente las mismas herramientas que usaría con el código del lado del servidor. No es necesario adjuntar a un proceso ni hacer nada complicado para habilitarlo.

Utilizo algunas herramientas: Fiddler , Firebug y Visual Studio. Escuché que Internet Explorer 8 tiene un buen depurador integrado.

Solía ​​usar Firebug , hasta que salió Internet Explorer 8. No soy un gran admirador de Internet Explorer, pero después de pasar un tiempo con las herramientas de desarrollo integradas, que incluyen un depurador realmente agradable, parece inútil usar cualquier otra cosa. Tengo que quitarme el sombrero ante Microsoft, hicieron un trabajo fantástico con esta herramienta.

También puede consultar YUI Logger . Todo lo que tienes que hacer para usarlo es incluir un par de etiquetas en tu HTML. Es una adición útil a Firebug, que es más o menos imprescindible.

Encontré que la nueva versión de Internet Explorer 8 (presione F12) es muy buena para depurar código JavaScript.

Por supuesto, Firebug es bueno si usas Firefox.

Además de usar el depurador de JavaScript de Visual Studio, escribí mi propio panel simple que incluyo en una página. Es simplemente como la ventana Inmediato de Visual Studio. Puedo cambiar los valores de mis variables, llamar a mis funciones y ver los valores de las variables. Simplemente evalúa el código escrito en el campo de texto.

Estoy usando Venkman , un depurador de JavaScript para aplicaciones XUL .

Además de Firebug y las extensiones de desarrollador nativas del navegador, JetBrains WebStorm IDE viene con soporte de depuración remota para Firefox y Chrome (se requiere extensión) integrado.

También admite:

• coffescript: cómo depurar coffeescript en node.js con mapas fuente de webstorm 6
• node.js

Las opciones para probar esto de forma gratuita son la versión de prueba 30 o el uso de una versión de acceso anticipado .

Si está utilizando Visual Studio , simplemente coloque debugger;encima del código que desea depurar. Durante la ejecución, el control se detendrá en ese lugar y podrá depurar paso a paso desde allí.

Como ocurre con la mayoría de las respuestas, realmente depende: ¿Qué estás tratando de lograr con tu depuración? ¿Desarrollo básico, solución de problemas de rendimiento? Para el desarrollo básico, todas las respuestas anteriores son más que adecuadas.

Para las pruebas de rendimiento específicamente, recomiendo Firebug. Ser capaz de perfilar qué métodos son los más caros en términos de tiempo ha sido invaluable para varios proyectos en los que he trabajado. A medida que las bibliotecas del lado del cliente se vuelven cada vez más robustas y se coloca más responsabilidad en el lado del cliente en general, este tipo de depuración y creación de perfiles solo se volverá más útil.

API de la consola de Firebug: http://getfirebug.com/console.html

Al presionar,F12 los desarrolladores web pueden depurar rápidamente el código JavaScript sin salir del navegador. Está integrado en cada instalación de Windows.

En Internet Explorer 11 , las herramientas F12 proporcionan herramientas de depuración como puntos de interrupción, visualización de variables locales y de observación, y una consola para mensajes y ejecución inmediata de código.