ES6 - Depuración
De vez en cuando, los desarrolladores cometen errores durante la codificación. Un error en un programa o una secuencia de comandos se conoce comobug.
El proceso de encontrar y corregir errores se llama debuggingy es una parte normal del proceso de desarrollo. Este capítulo cubre las herramientas y técnicas que pueden ayudarlo con las tareas de depuración.
Mensajes de error en IE
La forma más básica de localizar errores es activando la información de error en su navegador. De forma predeterminada, Internet Explorer muestra un icono de error en la barra de estado cuando se produce un error en la página.
Al hacer doble clic en este icono, accederá a un cuadro de diálogo que muestra información sobre el error específico que se ha producido.
Dado que este icono es fácil de pasar por alto, Internet Explorer le ofrece la opción de mostrar automáticamente el cuadro de diálogo Error cuando se produce un error.
Para habilitar esta opción, seleccione Tools → Internet Options → Advanced tab y finalmente marque el "Display a NotificationaboutEvery Script Error”Como se muestra en la siguiente captura de pantalla.
Mensajes de error en Firefox o Mozilla
Otros navegadores como Firefox, Netscape y Mozilla envían mensajes de error a una ventana especial llamada JavaScript Console o Error Console. Para ver la consola, seleccioneTools → Error Console or Web Development.
Desafortunadamente, dado que estos navegadores no dan una indicación visual cuando ocurre un error, debe mantener la Consola abierta y estar atento a los errores mientras se ejecuta el script.
Notificaciones de error
Las notificaciones de error que aparecen en la Consola o en los cuadros de diálogo de Internet Explorer son el resultado de errores de sintaxis y de tiempo de ejecución. Estas notificaciones de error incluyen el número de línea en el que se produjo el error.
Si está utilizando Firefox, puede hacer clic en el error disponible en la consola de errores para ir a la línea exacta en el script que tiene el error.
Depurar un script
Hay varias formas de depurar JavaScript. A continuación se muestran algunos de los métodos.
Utilice un validador de JavaScript
Una forma de verificar su código JavaScript en busca de errores extraños es ejecutarlo a través de un programa que lo verifique para asegurarse de que sea válido y que siga las reglas de sintaxis oficiales del idioma. Estos programas se llamanvalidating parsers o simplemente validadores para abreviar, y a menudo vienen con editores comerciales de HTML y JavaScript.
El validador más conveniente para JavaScript es JavaScript Lint de Douglas Crockford, que está disponible de forma gratuita en JavaScript Lint de Douglas Crockford.
Simplemente visite la página web, pegue su código JavaScript (solo JavaScript) en el área de texto provista y haga clic en el jslintbotón. Este programa analizará su código JavaScript, asegurándose de que todas las definiciones de variables y funciones sigan la sintaxis correcta. También verificará las declaraciones de JavaScript, como if y while, para asegurarse de que también sigan el formato correcto.
Agregue código de depuración a su programa
Puedes usar el alert() o document.write()métodos en su programa para depurar su código. Por ejemplo, puede escribir algo como sigue:
var debugging = true; var whichImage = "widget";
if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );
if( debugging )
alert( "Exits swapImage() with swapStatus=" + swapStatus );Al examinar el contenido y el orden de la alerta () tal como aparecen, puede examinar el estado de su programa muy fácilmente.
Utilice un depurador de JavaScript
UNA debuggeres una aplicación que pone todos los aspectos de la ejecución del script bajo el control del programador. Los depuradores proporcionan un control detallado sobre el estado del script a través de una interfaz que le permite examinar y establecer valores, así como controlar el flujo de ejecución.
Una vez que se ha cargado un script en un depurador, se puede ejecutar una línea a la vez o se le puede indicar que se detenga en ciertos puntos de interrupción. Una vez que se detiene la ejecución, el programador puede examinar el estado del script y sus variables para determinar si algo anda mal. También puede observar las variables en busca de cambios en sus valores.
La última versión del depurador de JavaScript de Mozilla (cuyo nombre en código es Venkman) para los navegadores Mozilla y Netscape se puede descargar desde: www.hacksrus.com/~ginda/venkman .
Consejos útiles para desarrolladores
Puede tener en cuenta los siguientes consejos para reducir la cantidad de errores en sus scripts y simplificar el proceso de depuración:
Utilice muchos comentarios. Los comentarios le permiten explicar por qué escribió el script de la forma en que lo hizo y explicar en particular las secciones difíciles del código.
Utilice siempre la sangría para que su código sea fácil de leer. Las declaraciones de sangría también le facilitan hacer coincidir las etiquetas de inicio y final, llaves y otros elementos HTML y de secuencia de comandos.
Escribe código modular. Siempre que sea posible, agrupe sus declaraciones en funciones. Las funciones le permiten agrupar declaraciones relacionadas y probar y reutilizar partes del código con un esfuerzo mínimo.
Sea consistente en la forma en que nombra sus variables y funciones. Intente usar nombres que sean lo suficientemente largos como para ser significativos y que describan el contenido de la variable o el propósito de la función.
Utilice una sintaxis coherente al nombrar variables y funciones. En otras palabras, manténgalos todos en minúsculas o en mayúsculas; si prefiere la notación Camel-Back, úsela de forma coherente.
Pruebe scripts largos de forma modular. En otras palabras, no intente escribir todo el script antes de probar cualquier parte de él. Escribe una pieza y haz que funcione antes de agregar la siguiente parte del código.
Utilice nombres descriptivos de variables y funciones y evite utilizar nombres de un solo carácter.
Mire sus comillas. Recuerde que las comillas se usan en pares alrededor de las cadenas y que ambas comillas deben ser del mismo estilo (simple o doble).
Mire sus signos iguales. No debe usar un solo = para fines de comparación.
Declare variables explícitamente usando el var palabra clave.
Depurar con Node.js
Node.js incluye una utilidad de depuración con todas las funciones. Para usarlo, inicie Node.js con el argumento de depuración seguido de la ruta al script para depurar.
node debug test.jsSe iniciará un mensaje que indica que el depurador se ha iniciado correctamente.
Para aplicar un punto de interrupción en una ubicación específica, llame al depurador en el código fuente como se muestra en el siguiente código.
// myscript.js
x = 5;
setTimeout(() => {
debugger;
console.log('world');
}, 1000);
console.log('hello');A continuación se muestra un conjunto de comandos paso a paso que se pueden usar con Node.
| No Señor | Comandos de pasos y descripción |
|---|---|
| 1 | cont,c Seguir |
| 2 | next,n próximo |
| 3 | step,s Paso |
| 4 | out,o Salir |
| 5 | pause Pausa el código. Similar a pausar en las herramientas de desarrollo |
Puede encontrar una lista completa de los comandos de depuración de Node aquí:
Depuración y código de Visual Studio
Una de las características clave de Visual Studio Code es su excelente soporte de depuración incorporado para Node.js Runtime. Para depurar código en otros idiomas, proporciona extensiones de depuración.
El depurador proporciona una gran cantidad de funciones que nos permiten lanzar archivos de configuración, aplicar / eliminar / deshabilitar y habilitar puntos de interrupción, variables o habilitar la inspección de datos, etc.
Puede encontrar una guía detallada sobre la depuración usando VS Code aquí: https://code.visualstudio.com/docs/editor/debugging