Inicio Catálogo DevTools: inspección, depuración y optimización Programa Detallado

Curso de DevTools: inspección, depuración y optimización (Programa detallado)

Objetivo:

Identificar las herramientas de desarrollo integradas en navegadores modernos para aprovechar sus principales funcionalidades.

Dirigido a:

Diseñadores y desarrolladores web, programadores y cualquier persona interesada en aprender a inspeccionar, depurar y optimizar sitios web utilizando las herramientas para desarrolladores de navegadores como Firefox, Chrome, Edge...

Requisitos:

  • Conocimientos básicos de HTML, CSS y JavaScript.
  • Navegador Google Chrome instalado (como mínimo).
  • Interés en experimentar directamente con páginas web.

Programa del curso

1.- Primeros pasos en DevTools

Objetivo

  • Identificar las funciones principales de las herramientas de desarrollador en navegadores para inspeccionar, depurar y optimizar sitios web.

Contenido

  1. Primeros pasos en DevTools
    1. Más allá del escritorio: dispositivos y contextos reales
    2. Conceptos básicos
    3. Día a día del desarrollador
    4. Errores comunes al trabajar con DevTools
    5. Acceso a Devtools
    6. Herramientas complementarias
    7. Buenas prácticas
    8. Resumen
Arriba

2.- Inspección de elementos (HTML y CSS)

Objetivo

Inspeccionar elementos HTML y estilos CSS utilizando herramientas de desarrollador en navegadores.

Contenido

  1. Inspección de elementos (HTML y CSS)
    1. Pestaña Elements
    2. Inspección de elementos
    3. Editar código en vivo
    4. DevTools como herramienta de aprendizaje de HTML y CSS
    5. Privacy and Security
    6. Resumen
Arriba

3.- La consola

Objetivo

  • Identificar las funciones principales de la consola del navegador para inspeccionar y depurar sitios web.

Contenido

  1. La consola
    1. Interfaz
    2. Primeros pasos
    3. Funciones prácticas de la consola
    4. Opciones avanzadas
    5. Uso de comandos en JavaScript
    6. Detección de errores
    7. Resumen
Arriba

4.- Red y recursos

Objetivo

  • Analizar y describir el comportamiento de los recursos de red en un sitio web mediante herramientas de desarrollo.

Contenido

  1. Red y recursos
    1. Pestaña Network
    2. Pestaña Application
    3. Network y Application: una visión global
    4. Resumen
Arriba

5.- Depuración de código

Objetivo

  • Detectar errores comunes en el código utilizando herramientas de desarrollador en navegadores.

Contenido

  1. Depuración de código
    1. Pestaña Sources
    2. Uso de breakpoints
    3. Depuración de errores: técnicas prácticas
    4. Resumen
Arriba

6.- Análisis y Optimización

Objetivo

  • Optimizar sitios web identificando fallos y cuellos de botella a partir del análisis de herramientas de desarrollador.

Contenido

  1. Análisis y Optimización
    1. Accesibility Tree (Vista de accesibilidad)
    2. Pestaña Performance
    3. Pestaña Lighthouse
    4. Memory
    5. Recorder (novedad en Chrome DevTools)
    6. Resumen
Arriba