Cómo usar Consola y Red del navegador para diagnosticar errores

Los conceptos son comunes a los navegadores actuales, aunque los nombres y atajos cambian:

• Firefox: Ctrl + Shift + K (Command + Option + K en macOS) abre la Consola web. Ctrl + Shift + E (Command + Option + E) abre Red.
• Chrome y Edge: Ctrl + Shift + J (Command + Option + J en macOS) abre la Consola. También puedes abrir las herramientas con F12 o Ctrl + Shift + I (Command + Option + I) y seleccionar Consola o Red.
• Safari: activa Safari > Ajustes > Avanzado > Mostrar funciones para desarrolladores. Después abre Desarrollo > Mostrar inspector web o pulsa Command + Option + I y selecciona Consola o Red.

La posición y apariencia de las herramientas puede variar según la versión.

Nos centraremos en dos vistas: Consola, para los mensajes generados por la página y el navegador, y Red, para las peticiones y respuestas HTTP.

Consola

Abre la Consola, limpia los mensajes anteriores y reproduce una sola vez la acción que falla. Empieza por el primer error que aparezca al realizar esa acción y conserva el mensaje completo, la URL del fichero, la línea y la traza cuando estén disponibles.

Algunos mensajes habituales son:

• Uncaught TypeError o Uncaught ReferenceError: copia el texto completo, no solo el nombre del error. La ruta, línea y traza permiten localizar el código que lo produjo.
• Mixed Content: anota la URL HTTPS de la página, la URL HTTP del recurso y si el navegador indica que lo bloqueó.
• Un mensaje de bloqueo por la política CORS: conserva el origen, la URL de destino y el mensaje completo, y localiza la misma petición en Red.
• Failed to load resource seguido de un estado como 404, 403 o 500: localiza esa petición en Red para revisar su URL, respuesta y estado exactos.

Una advertencia, un mensaje procedente de una extensión o un error posterior puede no ser la causa del problema. Relaciona siempre el mensaje con la acción que acabas de reproducir.

La Consola también permite ejecutar JavaScript con acceso a la página abierta. No pegues ni ejecutes código que no comprendas y no ignores una advertencia del navegador que bloquee el pegado.

Red

Red muestra las peticiones HTTP realizadas mientras las herramientas están abiertas: el documento principal, imágenes, JavaScript, hojas de estilo, fuentes y llamadas a APIs, entre otros recursos.

Abre Red antes de reproducir el problema, comprueba que la grabación esté activa, limpia la lista y recarga la página o realiza una sola vez la acción que falla.

• Si no carga la página completa, empieza por la petición de tipo Documento.
• Si falla un botón, formulario o guardado, revisa las peticiones de tipo Fetch/XHR generadas al realizar esa acción.
• Localiza peticiones con estado 4xx o 5xx, (failed), (blocked:...) o sin respuesta. Una petición cancelada puede deberse a una navegación y no siempre representa un fallo.
• Abre la petición y anota la URL, el método, el estado, la hora y el contenido relevante de Respuesta. Revisa también Iniciador y Tiempos cuando sea necesario.

Un código HTTP confirma el resultado de esa petición, pero no identifica por sí solo su causa. Por ejemplo, un 500 confirma un fallo interno, pero es necesario relacionarlo con el registro PHP o del servidor de la misma hora.

Antes de copiar un mensaje o una respuesta, sustituye contraseñas, tokens, direcciones privadas u otras credenciales que puedan aparecer.

Compartir un diagnóstico útil

Indica el navegador y su versión, la URL, la hora y la acción exacta. Una captura debe mostrar la petición o el error seleccionado y el detalle que explica el fallo; no hace falta incluir todas tus pestañas ni el escritorio.

Si exportas un archivo HAR desde Red, revísalo antes de compartirlo: puede contener cookies, cabeceras de autorización, parámetros, formularios y respuestas privadas. Utiliza una exportación sanitizada cuando esté disponible y comprueba igualmente su contenido. Para incidencias de pago o acceso, una prueba con datos ficticios es preferible a divulgar la sesión real.