/
[TWB-130] Herramientas Desarrollo Chrome

[TWB-130] Herramientas Desarrollo Chrome

Dec 13, 2024

Este curso cubre el uso de Chrome DevTools para depurar, analizar y optimizar sitios web. Incluye la inspección de elementos, depuración de JavaScript, simulación de dispositivos, análisis de red y rendimiento, auditoría con Lighthouse, y personalización de la interfaz, entre otros temas esenciales para desarrolladores web.

Duración:                     20 horas

Perfil:                           Avanzado

Dirigido a

Esta acción formativa va dirigida a programadores y analistas web interesados en mejorar sus habilidades de depuración y optimización de sitios web utilizando las herramientas de desarrollo de Google Chrome.

Requisitos previos 

Los alumnos necesitarán tener conocimientos consolidados de HTML, CSS y JavaScript.

Objetivos

  • Uso de Chrome DevTools para depurar y analizar código.

  • Simular dispositivos y condiciones de red para probar sitios web.

  • Optimizar el rendimiento, la memoria y la accesibilidad de las aplicaciones web.

  • Auditar y mejorar sitios web con Lighthouse.

  • Configurar y personalizar DevTools según las necesidades del desarrollo.

 

 

Pedir más Información

Pedir más Información

Volver a Pronoide

Volver a Pronoide

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

 

Documentación Recomendada

ChromeOS System Administrator's Guide
By Dr. Willie Sanders
February 2023 | 262 pages
ISBN 9781803241050

https://www.packtpub.com/product/chromeos-system-administrators-guide/9781803241050