LinuxParty

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.

Continúa aquí.