depuración de código

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 12

Depuración de codigo y comentarios.

Sin duda una de las tareas más importantes, a la hora de programar aplicaciones, es la de solucionar
los errores que van apareciendo. Todos los profesionales del mundo del desarrollo han pasado horas
y horas, al menos alguna vez, tratando de solventar un error que habían detectado en el programa.
Lo peor, es que hay veces que los errores se detectan mucho después porque ocurren circunstancias
en el uso de la aplicación que no se habían tenido en cuenta.
Los tipos de errores que podemos tener al crear un programa pueden ser:
Errores al escribir código por parte del programador:
Son errores de sintaxis, errores por cosas como: expresiones incorrectas al escribir el código, cierres
de llaves olvidados, palabras clave mal escritas, etc. Son los más fáciles de detectar porque cuando
se interpreta el código, se nos indica el error. En el caso de que el código se esté creando en un
entorno de trabajo avanzado, hay errores que aparecen marcados en el mismo instante en el que
hemos escrito el código. Estos errores los podemos clasificar a su vez en tipos:
• Errores detectables en tiempo de escritura. Son fallos de sintaxis evidentes que la
mayoría de entornos de desarrollo (incluido Visual Studio Code) pueden marcar
antes de probar el código.
• Errores de ejecución. Son errores que solo se pueden detectar cuando el código se
intenta ejecutar para probar la aplicación. Un ejemplo de error de este tipo es cuando
en el código se invoca a una función que aún no ha sido definida. Solamente cuando
tratamos de ejecutar el código se puede detectar que esa función no existe

Errores lógicos:En este la sintaxis es correcta, pero el programa no funciona como debería.
Ninguna herramienta nos avisa automáticamente del error, aunque sí hay herramientas especiales
que facilitan su detección, es el desarrollador el que detecta que la aplicación no funciona como
debería. Puede ser también, que el error lo detecten los usuarios y se lo comuniquen a los
desarrolladores
Errores del sistema: Hay circunstancias que provocan el error pero que están fuera del
control del programador: fallo en la conexión de red, caída de un servicio que estábamos utilizando,
etc. No podemos controlar estos fallos la mayoría de veces, pero al menos sí podemos matizar el
daño que causan a nuestra aplicación.
Errores de usuario. Son los provocados por acciones inesperadas que realiza el usuario y
que causan un error en tiempo de ejecución. Por ejemplo, pedir al usuario un número y recibir un
texto. En realidad, son errores lógicos que ocurren por no prever estas situaciones.
ERRORES, EXCEPCIONES Y AVISOS
• Error: es un fallo que produce el programa y que tiene como consecuencia que la aplicación
se detenga. Los errores no están controlados y provocan todo tipo de situaciones indeseadas
en la ejecución de la aplicación.
• Excepción es un error que podemos controlar para que se gestione adecuadamente. Las
excepciones permiten manejar objetos especiales que contienen los detalles del error para
poder lidiar con el mismo de la mejor manera posible.
• Aviso:es un error que se considera leve. No impide la ejecución del programa pero, al
menos, intenta avisar del problema al desarrollador o desarrolladora para que conozca la
situación. Los avisos pueden ser vitales para detectar, de forma temprana, errores complejos
de resolver

Javascript estricto
JavaScript se ideó bajo una capa de rapidez y dinamismo que hizo que este lenguaje no tuviera
una sintaxis rígida. Las ventajas de este hecho son: la facilidad para empezar a desarrollar
aplicaciones con este lenguaje y el dinamismo que se consigue en los resultados con poco esfuerzo
deescritura de código.
El problema es que, a medida que las posibilidades de las aplicaciones JavaScript han aumentado, el
control de errores se ha hecho cada vez más importante y el lenguaje original, en este sentido, no
ayudaba mucho.
Un ejemplo de variante más estricta es el lenguaje creado por Microsoft con el nombre de
TypeScript. Este lenguaje tiene una sintaxis más formal y estricta que es más del gusto de muchos
desarrolladores, es famoso porque añade muchos tipos de datos al lenguaje y fuerza que se utilicen
los elementos del lenguaje de forma más estricta, especialmente en todo lo referente al uso de tipos
de datos
No obstante, desde la versión ES5 del estándar, se puede activar en JavaScript el llamado modo
estricto, que es un modo más exigente con los errores.
Javascript permite crear nuestros propios errores mediante el objeto error y otros de tipo más
específico que abordaremos despues de la unidad dedicada a objetos en javascript.Asociado a
errores también se puede usar la estructura try{} catch{}
Depuración en el navegador.
Todos lo exploradores modernos y la mayoría de los otros ambientes soportan el “debugging” – una
herramienta especial de UI para desarrolladores que nos permite encontrar y reparar errores más
fácilmente.

Aquí utilizaremos Chrome porque es uno de los que mejores herramientas tienen en este aspecto.
El panel “sources/recursos”
Pulsando F12 podemos activar las herramientas de desarrollo.

El botón botón de activación (toggle button) abre la pestaña con los archivos.

Podemos ver tres zonas:

1.La Zona de recursos lista los archivos HTML, JavaScript, CSS y otros, incluyendo imágenes que
están incluidas en la página. Las extensiones de Chrome quizás también aparezcan aquí.
2.La Zona de Recursos muestra el código fuente de los archivos.
3.La Zona de información y control es para “debugging”, la exploraremos pronto.
Ahora puedes hacer click en el mismo botón de activación otra vez para esconder la lista de
recursos y darnos más espacio.
Consola
Si presionamos Esc, la consola se abrirá debajo. Podemos escribir los comandos y presionar Enter
para ejecutar.
Después de que se ejecuta una sentencia, el resultado se muestra debajo.

Breakpoints (puntos de interrupción)


Pulsando en las números de las lineas de código podemos configurar breakpoints.

Un breakpoint es un punto de código donde el debugger pausará automáticamente la ejecución de


JavaScript.
Mientras se pausa el código, podemos examinar las variables actuales, ejecutar comandos en la
consola, etc. En otras palabras, podemos depurar.
Siempre podemos encontrar una lista de los breakpoints en el panel derecho. Esto es muy útil
cuando tenemos muchos breakpoints en varios archivos. Ya que nos permite:
• Saltar rápidamente al breakpoint en el código (haciendo click en él dentro del panel).
• Desactivar temporalmente el breakpoint desmarcándolo.
• Eliminar el breakpoint haciendo click derecho y seleccionando quitar/eliminar/remove.

Breakpoints Condicionales
Click derecho en el número de línea nos permite crear un breakpoint condicional. Solo se disparará
cuando la expresión dada, que debes proveer cuando la creas, sea verdadera.
Esto es útil cuando necesitamos detener la ejecución para un determinado valor de las variables o
parámetros de función.

El comando “debugger”
También podemos pausar el código utilizando el comando debugger, así:

El desplegable de la derecha nos permite examinar el estado del código actual.


1.Watch – muestra el valor actual de cualquier expresión.
Puedes hacer click en el màs + e ingresar una expresión. El debugger mostrará su valor, y se
recalculará automáticamente en el proceso de ejecución.
2.Call Stack – muestra las llamadas anidadas en la cadena.
En el momento actual el debugger está dentro de la función hello(), llamada por un script en
index.html (no dentro de ninguna función, por lo que se llama “anonymous”).
Si haces click en un elemento de la pila (por ejemplo “anonymous”), el debugger saltará al código
correspondiente, y todas sus variables también serán examinadas.
3.Scope – variables activas.
Local muestra las variables de la función local. También puedes ver sus valores resaltados
sobre el código fuente.
Global contiene las variables globales (fuera de cualquier función).
También tenemos la palabra this la cual no estudiaremos ahora, pero pronto lo haremos.
Podemos ejecutar el programa paso a paso con los siguientes iconos:
Estilo de codificación
Nuestro código debe ser lo más limpio y fácil de leer como sea posible.

Sintaxis

Llaves:
En la mayoría de proyectos de Javascript las llaves están escritas en estilo “Egipcio” con la llave de
apertura en la misma linea como la correspondiente palabra clave – no en una nueva linea. Debe
haber también un espacio antes de la llave de apertura, como esto:

Una construcción de una sola línea, como if (condition) doSomething(), es un caso límite
importante. ¿Deberíamos usar llaves?
Tamaño de linea

A nadie le gusta leer una larga línea horizontal de código. Es una buena práctica dividirlos.
Por ejemplo:

Para el caso de sentencias if:

Identación
Hay dos tipos de indentación:
Indentación horizontal: 2 o 4 espacios.
Se realiza una sangría horizontal utilizando 2 o 4 espacios o el símbolo de tabulación horizontal
Una ventaja de los espacios sobre las tabulaciones es que los espacios permiten configuraciones de
sangría más flexibles que el símbolo del tabulador.
Por ejemplo, podemos alinear los argumentos con el paréntesis de apertura, así:
Indentación vertical: líneas vacías para dividir código en bloques lógicos.
Incluso una sola función a menudo se puede dividir en bloques lógicos. En el siguiente ejemplo, la
inicialización de variables, el bucle principal y la devolución del resultado se dividen verticalmente:

Insertar una nueva línea extra donde ayude a hacer el código mas legible. No debe haber más de
nueve líneas de código sin una indentación vertical.

Punto y coma:
Debe haber un punto y coma después de cada declaración, incluso si se puede omitir.
Hay idiomas en los que un punto y coma es realmente opcional y rara vez se usa. Sin embargo, en
JavaScript, hay casos en los que un salto de línea no se interpreta como un punto y coma, lo que
deja el código vulnerable a errores

Anidación
Intenta evitar anidar el código en demasiados niveles de profundidad.
Algunas veces es buena idea usar la directiva “continue” en un bucle para evitar anidamiento extra.

Podemos escribir:
Colocación de funciones
Si está escribiendo varias funciones “auxiliares” y el código que las usa, hay tres formas de
organizar las funciones.

1.Declare las funciones antes que el código que las usa:

2.Código primero, después funciones


3.Mixto: una función es declarada donde se usa por primera vez.

Guías de estilo
Una guía de estilo contiene reglas generales sobre “cómo escribir” el código, qué comillas usar,
cuántos espacios para indentar, la longitud máxima de la línea, etc. Muchas cosas menores.
Cuando todos los miembros de un equipo usan la misma guía de estilo, el código se ve uniforme,
independientemente de qué miembro del equipo lo haya escrito.
Por supuesto, un equipo siempre puede escribir su propia guía de estilo, pero generalmente no es
necesario. Hay muchas guías existentes para elegir.
Algunas opciones populares:

Google JavaScript Style Guide


Airbnb JavaScript Style Guide
Idiomatic.JS
StandardJS
(y mucho mas)
Si eres un desarrollador novato, puedes comenzar con la guía al comienzo de este capítulo. Luego,
puedes buscar otras guías de estilo para recoger más ideas y decidir cuál te gusta más.

Comentarios
Como ya sabemos, los comentarios pueden ser de una sola línea: comenzando con // y de múltiples
líneas: /* ... */.
Normalmente los usamos para describir cómo y por qué el código funciona.

Describe la arquitectura
Proporcionan una descripción general de alto nivel de los componentes, cómo interactúan, cuál es el
flujo de control en diversas situaciones En resumen – la vista panorámica del código.

Documenta la utilización de una función


Hay una sintaxis especial JSDoc para documentar una función: utilización, parámetros, valor
devuelto.
Por ejemplo:
Este tipo de comentarios nos permite entender el propósito de la función y cómo usarla de la
manera correcta sin tener que examinar su código.
Por cierto, muchos editores como WebStorm también pueden entenderlos y usarlos para proveer
auto completado y algún tipo de verificación automática para el código.
Además, existen herramientas como JSDoc 3 que pueden generar documentación en formato
HTML de los comentarios.

También podría gustarte