¿Cómo puedo depurar mi código JavaScript? [cerrado]
Cuando encuentro 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 digo que Firebug sea mejor que cualquier otro; Depende de tus preferencias personales y probablemente deberías probar tu sitio en todos los navegadores de todos modos (mi primera opción personal siempre es 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 recomendaría que instales el complemento Firebug . Esto proporciona varias funciones adicionales basadas en la versión básica que son útiles. Aquí sólo voy a hablar de Firebug.
Una vez que Firebug esté instalado, podrá 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 aquí, se abrirá el panel de Firebug en la parte inferior del navegador:
Firebug proporciona varias funciones, pero la que nos interesa es la pestaña de script. Al hacer clic en la pestaña del script 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 alcance su punto de interrupción, se verá como a continuación:
También puede agregar variables de vigilancia 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 ofrece Firebug, consulte las preguntas frecuentes de Firebug .
Cromo
Chrome también tiene su propia opción de depuración de JavaScript incorporada, que funciona de manera muy similar: haga clic derecho, inspeccione el elemento, etc. Eche un vistazo a las herramientas para desarrolladores de Chrome . Generalmente encuentro que los seguimientos de pila en Chrome son mejores que en Firebug.
explorador de Internet
Si está desarrollando en .NET y utilizando Visual Studio utilizando el entorno de desarrollo web, puede depurar el 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 lo tiene, Internet Explorer también proporciona todas las herramientas que se muestran arriba. Es molesto que, en lugar de hacer clic con el botón derecho para inspeccionar las características de los elementos de Chrome o Firefox, acceda a las herramientas de desarrollador presionando F12 . Esta pregunta cubre la mayoría de los puntos.
- Internet Explorer 8 (Herramientas de desarrollo - F12). Cualquier otra cosa es de segunda categoría en la tierra de Internet Explorer.
- Firefox y Firebug . Pulsa F12para mostrar.
- Safari (Mostrar barra de menú, Preferencias -> Avanzado -> Mostrar barra de menú Desarrollar )
- Consola JavaScript de Google Chrome ( o F12( Ctrl++ )). Básicamente es el mismo navegador que Safari, pero Safari es mejor en mi humilde opinión.ShiftJ
- Opera ( Herramientas -> Avanzado -> Herramientas de desarrollador )
Hay una palabra clave depuradora 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:
Supongamos 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 abrirse la ventana del desarrollador del navegador.
