🔧 Cómo depurar una web que va lenta usando las herramientas del navegador (Firefox, Chrome y Edge)

Depurar una web no requiere herramientas externas costosas. Los navegadores modernos como Firefox, Chrome y Edge ofrecen potentes suites de desarrollo integradas. Saber usarlas es imprescindible para detectar y solucionar errores de forma rápida, eficaz y profesional.

Cuando una página web no funciona como debería —ya sea por errores de estilo, JavaScript roto o tiempos de carga lentos—, una de las formas más rápidas y potentes de averiguar qué ocurre es usando las herramientas de desarrollo que ofrecen los navegadores modernos. En este artículo te explicamos cómo hacerlo en Firefox, Chrome y Microsoft Edge, comenzando por Firefox, nuestra opción preferida para desarrolladores exigentes.

🦊 Firefox: potencia y precisión para desarrolladores web

Firefox es uno de los navegadores más completos a nivel de herramientas de desarrollo. Para abrirlas, pulsa:

• F12, o
• Ctrl + Shift + I (Windows/Linux), o
• Cmd + Option + I (macOS)

Una vez abiertas, verás distintas pestañas. Estas son las más importantes:

1. Inspector

Permite examinar y modificar el HTML y CSS de cualquier elemento.

• Ideal para verificar estilos aplicados, jerarquía de etiquetas y cambios en tiempo real.
• Puedes ver reglas CSS activas, heredadas y sobrescritas.

2. Consola

Aquí verás todos los errores de JavaScript, advertencias y los mensajes de console.log().

• Muy útil para identificar por qué algo no responde al hacer clic o al cargar.
• Puedes ejecutar comandos directamente.

3. Red (Network)

• Recarga la página con esta pestaña abierta para ver todos los recursos que se cargan.
• Identifica errores 404 o 500, archivos lentos, peticiones AJAX, etc.
• Puedes ver los tiempos de carga y el orden de descarga.

4. Rendimiento (Performance)

• Graba lo que ocurre durante una sesión de carga y analiza qué bloquea o ralentiza el renderizado.
• Muy útil para detectar cuellos de botella.

5. Depurador (Debugger)

• Examina el código JavaScript y establece puntos de interrupción para analizar paso a paso lo que hace tu script.

6. Almacenamiento (Storage)

• Consulta cookies, localStorage, sesiones y datos guardados por la web.

7. Diseño adaptable y accesibilidad

• Simula distintos tamaños de pantalla.
• Revisa contraste de colores, orden de navegación y accesibilidad general.

🧭 Google Chrome: versatilidad y velocidad

Las herramientas de desarrollo de Chrome son muy similares, y también se abren con:

• F12, o
• Ctrl + Shift + I (Windows/Linux), o
• Cmd + Option + I (macOS)

Sus principales pestañas son:

✔ Elements

El equivalente al Inspector de Firefox. Aquí modificas HTML y CSS directamente en la vista previa.

✔ Console

Verás errores JS, advertencias y resultados de tus scripts.

✔ Network

Perfecta para detectar archivos que no cargan, analizar tiempos de espera o respuestas de APIs.

✔ Performance

Grabación avanzada de la carga y renderizado de la página.

✔ Lighthouse

Auditoría automática de rendimiento, SEO, accesibilidad y más. Una ventaja frente a Firefox.

✔ Application

Muestra datos como cookies, IndexedDB, sessionStorage, localStorage, archivos offline, etc.

🌀 Microsoft Edge: potencia basada en Chromium

Edge, al estar basado en Chromium, comparte muchas de las funciones de Chrome, con alguna personalización propia.

Puntos destacables:

• Herramientas casi idénticas a las de Chrome, pero con integración adicional para desarrolladores de Microsoft (por ejemplo, herramientas para debugging en sitios SharePoint o Azure).
• Se accede con F12 o los mismos atajos.

🎯 Recomendaciones generales

• Siempre recarga la página con la pestaña "Red" activa para ver todas las peticiones reales.
• Usa la Consola para detectar errores invisibles a simple vista.
• El Inspector es ideal para revisar problemas de estilo o jerarquía de elementos.
• Si sospechas de problemas de carga, entra a la pestaña Performance o prueba Lighthouse (en Chrome y Edge).

Un pequeño ejemplo:

Para depurar una web desde Firefox, puedes usar las herramientas de desarrollo integradas, que son muy potentes. Aquí tienes una guía rápida y clara:

🧰 Abrir las herramientas de desarrollo

Presiona:

• F12 o

• Ctrl + Shift + I (en Linux/Windows)

• Cmd + Option + I (en macOS)

O haz clic derecho en cualquier parte de la página y selecciona “Inspeccionar”.

🔍 Herramientas clave para depurar una web

1. Inspector

• Examina el HTML y CSS de cualquier elemento.

• Puedes editar directamente los estilos para probar cambios en tiempo real.

• Ideal para revisar maquetación, clases y reglas CSS.

2. Consola (Console)

• Muestra errores de JavaScript, advertencias y mensajes console.log().

• Si algo no funciona (como un botón o script), este es el primer sitio que debes mirar.

3. Red (Network)

• Carga la pestaña Red, luego recarga la página (F5).

• Te muestra todos los archivos que carga la web: HTML, JS, CSS, imágenes, AJAX, etc.

• Puedes ver tiempos de carga, errores 404 o 500, y respuestas de API.

• Ordena por columna “Tiempo” para detectar lo más lento.

4. Rendimiento (Performance)

• Graba una sesión para detectar cuellos de botella en la carga o renderizado.

• Útil si el sitio se “congela” o responde lento.

5. Almacenamiento (Storage)

• Consulta cookies, localStorage y sesiones.

• Puedes borrar datos específicos o ver qué está guardando la web.

6. Depurador (Debugger)

• Navega y depura código JavaScript.

• Puedes poner puntos de ruptura (breakpoints) y ver el estado de variables en ejecución.

7. Accesibilidad y diseño adaptable

• Firefox incluye herramientas para probar responsive (tamaños de pantalla móviles/tablet) y revisar el contraste y accesibilidad.

🧪 ¿Y si es WordPress?

Si estás depurando el backend de WordPress:

• Revisa la pestaña Red para ver qué peticiones se hacen al cargar el panel de administración.

• Activa Query Monitor para inspeccionar consultas lentas, hooks, PHP, etc.

• Usa Consola para detectar conflictos de JS entre plugins.