Depuración con las herramientas de desarrollo del navegador

Al escribir código, inevitablemente surgen errores: la pantalla no se muestra como se esperaba, los botones no responden o los datos no se cargan. En estos casos, lo primero que hace el desarrollador es abrir las herramientas de desarrollo del navegador (DevTools).

Cuando los resultados son inesperados en el laboratorio, se utiliza un microscopio para examinarlos; de manera similar, en el desarrollo web, cuando surge un problema, se utiliza DevTools para analizarlo. Está integrado en todos los navegadores modernos (Chrome, Edge, Safari, Firefox) y no requiere instalación.

Abrir las herramientas de desarrollo

Mac:     ⌘ + Opción + I
Windows: F12 o Ctrl + Shift + I

Opcional: clic derecho en la página web → "Inspeccionar"

Cuando se abren las herramientas de desarrollo, se muestran varias pestañas. Vamos a explorar las tres más utilizadas.

Pestaña Elementos: Visualización de la estructura HTML/CSS

La pestaña Elementos muestra en tiempo real la estructura HTML y los estilos CSS de la página actual. Es como examinar el estado actual del cuaderno de laboratorio.

Posibilidades:

1. Visualización de la estructura HTML: se puede ver en forma de árbol la ubicación de cada etiqueta y su estructura de anidamiento.

2. Modificación de CSS en tiempo real: se pueden modificar directamente los valores de CSS en el panel derecho y comprobar los resultados de inmediato. "¿Qué pasaría si cambio este relleno a 20 píxeles?" → comprobar al instante → si el resultado es satisfactorio, aplicar los cambios en el código.

3. Selección de elementos: al hacer clic en el icono del cursor en la esquina superior izquierda de las herramientas de desarrollo (o ⌘ + Shift + C), el elemento seleccionado en la página se resaltará en la pestaña Elementos.

Ejemplos de uso práctico:

Problema: "Cambié el tamaño de la fuente pero no se aplica"

1. Haz clic derecho en el elemento → Inspeccionar
2. El elemento seleccionado en la pestaña Elements
3. Verifica el panel Styles a la derecha
4. Tu CSS aparece tachado → otro CSS está sobrescribiendo por prioridad
5. Identifica y corrige qué CSS está sobrescribiendo

Pestaña Consola: ejecución de JavaScript y verificación de errores

La pestaña Consola es el microscopio de JavaScript. Tiene dos funciones principales.

1. Verificación de mensajes de error

Cuando se produce un error en JavaScript, se muestra en rojo en la consola:

❌ Uncaught TypeError: Cannot read properties of undefined (reading 'length')
     at calculateGC (script.js:15:28)

Este mensaje indica que se intentó acceder a la propiedad length de un valor undefined en la línea 15 del archivo "script.js". Entender los mensajes de error te ayuda a resolver la mitad de los problemas de depuración.

2. Ejecución directa del código

Puedes escribir y ejecutar código JavaScript directamente en la consola:

// Escribir directamente en la consola
document.title
// → "Protocolo Western Blot"

document.querySelectorAll("li").length
// → 9 (número de elementos de la lista)

2 + 2
// → 4

Es útil para verificar valores de variables, explorar elementos del DOM o realizar cálculos sencillos.

Visualizar la consola y los elementos simultáneamente:

En la pestaña Elementos, puedes mostrar la consola en la parte inferior:

• Presiona la tecla Esc para que aparezca el panel lateral (Drawer) de la consola en la parte inferior.
• Presiona Esc nuevamente para cerrarlo.

De esta manera, puedes observar la estructura HTML y ejecutar JavaScript al mismo tiempo.

Pestaña Red: Seguimiento de llamadas a la API

La pestaña Red muestra todas las solicitudes que el navegador envía y recibe del servidor. Cuando se llama a una API mediante fetch o Ajax, puedes verificar si la solicitud se realizó correctamente y cuál fue la respuesta.

Qué puedes hacer:

1. Verificar la lista de solicitudes: A medida que se carga la página, todos los archivos (HTML, CSS, JS, imágenes, respuestas de la API) se enumeran en orden cronológico.

2. Verificar la respuesta de la API: Al hacer clic en una solicitud específica, puedes ver los encabezados (encabezados de solicitud y respuesta), la vista previa (vista previa de la respuesta) y la respuesta original.

3. Verificar los códigos de estado: Puedes ver de un vistazo códigos como 200 (éxito), 404 (no encontrado) y 500 (error del servidor).

Ejemplos de uso práctico:

Problema: "Al cargar los datos de muestra con fetch, solo aparece una pantalla en blanco"

1. Abrir la pestaña Network
2. Actualizar la página (⌘ + R)
3. Buscar la solicitud /api/samples
4. Verificar el código de estado:
   - 404 → La URL es incorrecta o no hay una ruta correspondiente en el servidor
   - 500 → Error en el código del servidor (ver los registros del servidor)
   - 200 pero con un array vacío → No hay datos o problema con la consulta de la base de datos
5. Verificar los datos de respuesta reales en la pestaña Response

Pestaña Aplicación: Verificación de los datos almacenados

En la pestaña Aplicación, puedes verificar y modificar las cookies, el almacenamiento local (localStorage) y el almacenamiento de sesión (sessionStorage).

En esta pestaña, puedes comprobar cómo se almacenan realmente las cookies que aprendiste en el tema de auth-cookies:

Application → Cookies → localhost
→ session_id: abc123
→ Path: /
→ HttpOnly: ✓

El progreso del entrenamiento de DevBench también se guarda en el almacenamiento local. Puedes verificarlo en Aplicación → Almacenamiento local.

Lista de verificación de depuración en 3 pasos

Cuando surja un problema, verifica en este orden:

Paso 1: Verificar la consola (¿hay errores en rojo?)

• Si los hay → Lee el mensaje de error → Verifica el nombre del archivo:número de línea → Corrige ese código.
• Si no los hay → Pasa al paso 2.

Paso 2: Verificar la red (¿La solicitud de la API fue exitosa?)

• Si es 404/500 → Problema del lado del servidor.
• Si es 200 pero los datos son incorrectos → Verifica la respuesta.
• Si no hubo solicitud → El código fetch no se ejecutó → Verifica en la consola.

Paso 3: Verificar los elementos (¿hay elementos en la pantalla?)

• Si hay elementos pero no se ven → Problema de CSS (display: none, tamaño 0, opacidad, etc.).
• Si el elemento no existe → JavaScript no pudo agregarlo al DOM.

Con solo recordar estos tres pasos, puedes diagnosticar la mayoría de los problemas de desarrollo web.

Prueba tú mismo (Ejemplo desvanecido)

Completa el espacio en blanco para completar el código de depuración que se ejecutará en la consola de DevTools.

// 1. Verificar el número de etiquetas h2 en la página
document.querySelectorAll("").length
// 2. Comprobar el texto del elemento con el ID "result".
document.("result").innerText
// 3. Verificar el tipo de una variable específica
 odValue
// → "number"

Errores comunes y soluciones

P: Abro las herramientas de desarrollo y la pestaña Red está vacía.

La pestaña Red solo registra las solicitudes realizadas después de que se abrió. Abre primero las herramientas de desarrollo y luego actualiza la página (⌘ + R).

P: Hay muchos errores en la consola, pero no sé si son errores de mi código.

Las extensiones del navegador (como los bloqueadores de anuncios) suelen generar errores. Puedes probar sin extensiones abriendo la página en modo incógnito (⌘ + Shift + N).

P: Modifiqué el CSS en la sección Elementos, pero al actualizar la página vuelve a su estado original.

Lo que se modifica en las herramientas de desarrollo es temporal. Una vez que encuentres los valores que te gustan, debes aplicarlos al archivo CSS real. Las herramientas de desarrollo son un entorno "experimental", mientras que los archivos de código son el "almacén permanente".