[TWB-130] Herramientas Desarrollo Chrome

Contenido

1. Introducción a Chrome DevTools

   1. Visión general de las herramientas de desarrollo de Chrome
   2. Acceso y navegación básica en Chrome DevTools

2. Comandos y Atajos de Teclado

   1. Uso de comandos rápidos y atajos de teclado para mejorar la productividad

3. Simulación de Dispositivos y Condiciones de Red

   1. Uso del Modo Device para simular dispositivos móviles
   2. Configuración de limitaciones de red y CPU para pruebas de rendimiento

4. Inspección y Edición del DOM

   1. Visualización y edición de elementos en el DOM
   2. Acceso a nodos en la Consola y manipulación de propiedades CSS
   3. Inspección y depuración de layouts CSS (Flexbox y Grillas)

5. Consola de JavaScript

   1. Visualización y registro de mensajes.
   2. Ejecución de JavaScript en la consola y uso de expresiones en vivo

6. Depuración de JavaScript

   1. Uso de puntos de interrupción y depuración paso a paso
   2. Ejecución y edición de fragmentos de código en el panel de Sources

7. Monitoreo de Actividad de Red

   1. Inspección de solicitudes de red y archivos cargados
   2. Análisis de rendimiento de la red y búsqueda de archivos específicos

8. Análisis de Rendimiento

   1. Evaluación del rendimiento en tiempo de ejecución
   2. Identificación de cuellos de botella y optimización de tiempos de carga

9. Gestión de Memoria

   1. Uso del Administrador de Tareas de Chrome
   2. Detección de fugas de memoria con Heap Snapshots y Allocation Timelines

10. Depuración de Aplicaciones Web Progresivas (PWA)

    1. Inspección y edición de almacenamiento local, de sesión e IndexedDB
    2. Depuración de servicios en segundo plano y caché

11. Uso de Lighthouse

    1. Realización de auditorías de rendimiento, accesibilidad y SEO
    2. Optimización de sitios a partir de las recomendaciones de Lighthouse

    3. Inspección y modificación de animaciones CSS

       1. Visualización y depuración de efectos de animación CSS
       2. Identificación de CSS y JavaScript no utilizados para mejorar la eficiencia

    4. Depuración de multimedia y recursos

       1. Inspección de datos de reproductores multimedia
       2. Manejo de problemas de compatibilidad de red y seguridad

12. Uso de Recorder para Flujos de Usuario

    1. Grabación, reproducción y medición de interacciones del usuario en la página

13. Optimización del Renderizado

    1. Identificación de problemas de rendimiento en el renderizado de la página

14. Simulación de Sensores y Geolocalización

    1. Sobrescritura de datos de geolocalización y orientación del dispositivo

15. Depuración Remota

    1. Acceso a servidores locales y depuración en dispositivos Android

16. Auditoría de Accesibilidad

    1. Evaluación de la accesibilidad de una página web y mejora de la usabilidad

17. Personalización y Configuración de DevTools

    1. Ajustes y personalización de las herramientas de desarrollo
    2. Desarrollo de aplicaciones y plugins personalizados para DevTools