¿Qué son las herramientas de desarrollo de Chrome (Chrome DevTools)?

Chrome DevTools es un conjunto de herramientas integradas en el navegador para el desarrollo y depuración web.

Paneles principales:

• Elements: Visualización y refactorización en tiempo real de la estructura HTML y estilos CSS.
• Console: Salida de logs, ejecución de código JavaScript, depuración.
• Sources: Depuración de código JavaScript con puntos de interrupción, perfilado de rendimiento.
• Network: Monitoreo de solicitudes de red (HTTP/HTTPS), análisis de tiempos de respuesta y contenido.
• Performance: Análisis del rendimiento de carga y ejecución del código de la página.
• Memory: Perfilado del uso de memoria, detección de fugas.
• Application: Exploración de recursos de la aplicación — almacenamiento (Local Storage, Session Storage, IndexedDB), cookies, caché.
• Security: Análisis de seguridad de la página, incluyendo verificación de certificados SSL.
• Lighthouse: Auditoría de la página web según criterios de rendimiento, accesibilidad, SEO y buenas prácticas.

Uso en QA:

• Verificación UI/UX: Análisis de estilos (Elements), adaptabilidad (Toggle device toolbar).
• Depuración del frontend: Detección de errores en JavaScript (Console, Sources).
• Análisis de interacciones API: Monitoreo de solicitudes y respuestas (Network).
• Evaluación del rendimiento: Estimación del tiempo de carga y ejecución de scripts (Performance).
• Exploración de almacenamiento: Verificación de Local Storage, cookies, etc. (Application).
• Simulación de dispositivos: Pruebas en diferentes tamaños de pantalla y condiciones de red (Network – Throttling).