Todos cometemos muchos errores al programar. Estos errores pueden ser muy simples, como escribir mal una línea de código, o más elaborados, como escribir algo de código que lleve a un desbordamiento de memoria. A lo largo de los años, he desarrollado una receta de depuración muy efectiva que compartiré a continuación. Depurar se vuelve más desafiante a medida que tu aplicación crece y tiene más piezas que se conectan. Por esta razón, es imperativo ejecutar tu código casi cada vez que cambias algo (recarga rápida) en lugar de esperar hasta que hayas hecho muchos cambios. 😎 Consejo profesional: ¿En general, cuál fue la línea de código que actualizaste por última vez? ¿Estaba en el front-end? Voy a suponer lo peor: no tienes idea de cuándo apareció el error por primera vez y has hecho muchos cambios desde la última vez que ejecutaste tu aplicación.
La depuración de código es una habilidad esencial para cualquier programador, sin importar su nivel. Aprender a encontrar y corregir errores no solo mejora la calidad del código, sino que también te convierte en un desarrollador más eficaz y autónomo. Saber que puedes enfrentarte a errores te hace más independiente. Si has pasado por algo parecido, entonces ya sabes lo frustrante que puede ser encontrar errores cuando estás aprendiendo a programar.
¿Qué Significa Depurar Código?
Depurar código consiste en identificar, analizar y corregir errores en un programa para que funcione correctamente. Estos errores pueden ser sintácticos (cuando el lenguaje del código está mal escrito), lógicos (cuando el código no hace lo que debería), o de ejecución (cuando se produce un fallo al correr el programa). Detectar y corregir este tipo de fallos es el objetivo de la depuración.
Por ejemplo, si escribimos:
let total = 10;if (total = 5) { console.log("Total es cinco");}Este código no funcionará como esperamos, porque usamos el signo de asignación = en lugar del de comparación ===.
¿Por Qué es Tan Importante Depurar Código?
Aprender a depurar no solo significa arreglar errores, sino también comprender profundamente cómo funciona tu programa. Es una práctica esencial para mejorar tus habilidades como desarrollador.
Beneficios Clave de una Depuración Efectiva
- Ahorro de tiempo: Encontrar errores rápidamente evita estancarse durante horas.
- Calidad del código: Al identificar patrones de error, mejoras tu estilo de programación.
- Resolución de problemas: Aprendes a pensar de forma lógica y metódica.
- Confianza: Saber que puedes enfrentarte a errores te hace más independiente.
Consecuencias de No Depurar Correctamente
- Errores persistentes: Se pueden arrastrar durante días o afectar a todo el proyecto.
- Problemas de experiencia de usuario: Fallos en la navegación, funciones que no responden o pantallas en blanco.
- Pérdida de tiempo y recursos: Cuanto más tarde se detecta un error, más costoso es solucionarlo.
Estrategias para la Depuración de HTML y Código Asociado
Es una buena idea dividir los errores en "tipos" para que podamos preparar estrategias para cada grupo.
Errores de Renderizado y Manipulación del DOM
Tratar con el DOM, renderizado de React, etc., puede presentar desafíos únicos. Los errores de renderizado a menudo se manifiestan como elementos que no aparecen, se muestran incorrectamente o interactúan de manera inesperada.
Cuando se utiliza un elemento no válido en la cabecera, Google asume el final de la cabecera del elemento e ignora cualquier elemento que aparezca después del elemento no válido. Esto significa que los elementos críticos de la cabecera que aparezcan después del elemento no válido no se verán.
Urls que tienen un elemento body que precede a la apertura del elemento html. Los navegadores y Googlebots asumen automáticamente el comienzo del body y generan un elemento head vacío antes de él. Esto significa que el elemento cabeza esperado y sus metadatos se verán en el cuerpo y se ignorarán.
El elemento <head> debe ser el primer elemento del código <html>. Los navegadores y Googlebot generarán automáticamente un elemento head si no lo encuentran como primer elemento.
Errores Relacionados con Códigos de Estado HTTP
Los códigos de estado HTTP proporcionan información valiosa sobre la comunicación entre el cliente y el servidor. Entenderlos es crucial para depurar problemas de red y API.
| Código | Significado |
|---|---|
| 400 | Es un problema del lado del cliente; el servidor espera un formato o valores diferentes en sus datos. |
| 401 | Es un problema del lado del cliente porque está intentando solicitar algo para lo que no tiene permiso. ¿Olvidaste incluir credenciales en la solicitud? |
| 403 | Probablemente del lado del cliente porque las credenciales están incluidas, pero pueden estar equivocadas. |
Si tienes un error en un servidor web (como Express, Flask, Django, etc.), es una buena idea verificar el registro de solicitudes que se le hacen al servidor. En el registro de solicitudes, puede ver cada solicitud que cualquier lado del cliente haya hecho a su API ordenadas por hora exacta.
¿La pestaña de red tiene el código de estado 4xx? ¿La pestaña de red tiene el código de estado 5xx?
Errores de Sintaxis y Tipos de Datos
Los errores de sintaxis generalmente te dicen en qué línea está el problema. Por otro lado, los TypeError indican problemas con los tipos de datos que se están utilizando en las operaciones.
Si intentas arreglar el error haciendo cambios en tu código y aparece otro error, ¡eso suele ser buena noticia! Debes estar seguro de la información que has reunido para mantenerte enfocado en la solución.
Herramientas y Técnicas de Depuración Esenciales
Existen distintas formas de abordar la depuración, desde técnicas manuales hasta herramientas automatizadas. Aquí explicamos las más útiles para quienes están empezando.
La Consola del Navegador
La consola es una herramienta indispensable para cualquier desarrollador web. Permite ejecutar código JavaScript, ver mensajes de error y registrar información útil.
Si presionamos Esc, la consola se abrirá debajo. Los usuarios regulares no ven este output, ya que está en la consola. Hay muchas más opciones en la consola de desarrollo que las que se cubren aquí. Ah, y también puedes hacer click en todos lados en la consola a ver qué pasa. Esta es probablemente la ruta más rápida para aprender a usar la consola de desarrolladores.
Puntos de Interrupción (Breakpoints)
Los puntos de interrupción son marcadores en tu código que le dicen al navegador que pause la ejecución en ese punto exacto. Esto te permite examinar el estado de tu aplicación en ese momento.
Examinemos qué pasa con el código de la página de ejemplo. En hello.js, haz click en el número de línea 4. ¡Felicidades! Ya configuraste un breakpoint. Mientras se pausa el código, podemos examinar las variables actuales, ejecutar comandos en la consola, etc. Siempre podemos encontrar una lista de los breakpoints en el panel derecho. Esto es muy útil cuando tenemos muchos breakpoints en varios archivos. Click derecho en el número de línea nos permite crear un breakpoint condicional.
🛠️ Debugging como un profesional en JavaScript con DevTools del navegador - Programación en español
Pausar y Examinar el Estado del Código
Cuando el código se pausa en un breakpoint, puedes inspeccionar el estado de las variables y la pila de llamadas.
En nuestro ejemplo, hello() se llama durante la carga de la página, entonces la forma mas fácil de activar el debugger es recargando la página. Por favor abre el desplegable de información de la derecha (etiquetado con flechas). Puedes hacer click en el más + e ingresar una expresión. Local muestra las variables de la función local. Hay botones para esto en el panel superior derecho.
La ejecución continuó, alcanzando el siguiente breakpoint dentro de say() y pausándose allí. Revisa el “Call stack” a la derecha. Ha incrementado su valor en una llamada.
Navegación en la Ejecución del Código
Existen varios comandos para controlar la ejecución del código una vez que se ha pausado:
- Reanudar la ejecución: Continúa la ejecución hasta el siguiente breakpoint o hasta que el programa termine.
- Siguiente sentencia (Step Over): Ejecuta la siguiente línea de código. Si la siguiente línea es una llamada a una función, la ejecuta completamente sin entrar en ella.
- Siguiente dentro (Step Into): Similar a “siguiente paso”, pero se comporta diferente si la siguiente sentencia es un llamado a función; entra en el código de esa función.
- Siguiente fuera (Step Out): Continúa la ejecución hasta que la función actual termine y regresa al punto donde fue llamada.
Similar a “siguiente”, pero se comporta diferente en las llamadas asincrónicas. Para el futuro, simplemente recuerda que “Siguiente” ignora las acciones asincrónicas tales como setTimeout (llamada a función programada), que se ejecutan después. “Siguiente dentro” va al interior de su código, esperando por ellas si es necesario. La ejecución se detendrá en la última línea de la función actual. Este botón no mueve la ejecución.
Activación de Pausa Automática ante Errores
Cuando está activo y la consola de developers tools está abierta, un error de script automáticamente pausa la ejecución. Entonces podemos analizar las variables para ver qué está mal.
Análisis Estructural del HTML y Elementos Críticos
El análisis detallado de la estructura HTML es fundamental para identificar problemas de renderizado y de indexación por parte de los motores de búsqueda.
La pestaña de referencia se llama «Validación» e incluye varios filtros para identificar problemas comunes:
- Elementos HTML no válidos en el encabezado: Páginas con elementos HTML no válidos en el encabezado.
- Elemento
bodyque precede ahtml: URLs que tienen un elementobodyque precede a la apertura del elementohtml. headNo es lo primero enhtmlElemento: El elemento<head>debe ser el primer elemento del código<html>.- Falta la etiqueta
head: Páginas a las que les falta un elementoheaden el HTML. - Etiquetas
headmúltiples: Páginas con múltiples elementosheaden HTML. - Falta
bodyEtiqueta. - Múltiple
bodyEtiquetas. - Documento HTML de más de 15MB.
Como acabamos de describir, el análisis granular se encuentra en la pestaña dedicada, mientras que para una vista macro puedes controlar los datos en la barra lateral, que estará etiquetada como Alta Prioridad en la pestaña «Asunto».
Inspección del Código Fuente
Una vez descubiertas todas las URL afectadas por esta criticidad, se pueden analizar a fondo de tres formas:
- HTML sin procesar: Analizar la Cabeza en HTML sin procesar haciendo clic con el botón derecho del ratón y eligiendo la opción «Ver fuente» de la página.
Depuración de Aplicaciones Complejas y Arquitecturas Escalables
Nota: Hay arquitecturas de back-end más complejas con código asíncrono, herramientas basadas en la nube, microservicios, etc. Depurar se vuelve más desafiante a medida que tu aplicación crece y tiene más piezas que se conectan.
El Rol de los Registros (Logs)
Si has seguido los pasos anteriores correctamente, sabes a qué parte de tu código está relacionado el error. ¡Así que mantente enfocado y no adivines! Tienes información útil sobre tu error; úsala y sigue esa pista.
La Importancia de la Recarga Rápida
Por esta razón, es imperativo ejecutar tu código casi cada vez que cambias algo (recarga rápida) en lugar de esperar hasta que hayas hecho muchos cambios.
El Proceso Iterativo de Depuración
Imagina esto: llevas horas escribiendo una función que debería mostrar un mensaje en pantalla. Todo parece estar bien, pero al ejecutar el código… nada. Ni errores, ni resultados. Solo silencio.
Si has pasado por algo parecido, entonces ya sabes lo frustrante que puede ser encontrar errores cuando estás aprendiendo a programar. La depuración de código es una habilidad esencial para cualquier programador, sin importar su nivel. Aprender a encontrar y corregir errores no solo mejora la calidad del código, sino que también te convierte en un desarrollador más eficaz y autónomo. En CEI, sabemos que dominar esta habilidad marca la diferencia entre un estudiante frustrado y un futuro programador seguro y resolutivo.
La Zona de Recursos y la Consola
Hagamos click allí y seleccionemos index.html y luego hello.js en el árbol de archivos. La Zona de recursos lista los archivos HTML, JavaScript, CSS y otros, incluyendo imágenes que están incluidas en la página.
Cuando se utiliza un elemento no válido en la cabecera, Google asume el final de la cabecera del elemento e ignora cualquier elemento que aparezca después del elemento no válido. Esto significa que los elementos críticos de la cabecera que aparezcan después del elemento no válido no se verán.
Los desarrolladores web junior. Sé que estás aquí para aprender cómo solucionar errores.
