Newsletter para devsEntra
Masterclass

Taller de Chrome Developer Tools

Un repaso a las características mágicas de la herramienta para desarrolladores en Google Chrome.

Desde 15€/mes

Taller de Chrome Developer Tools

01:18:30
Suscríbete para ver la masterclassDesde 15€/mes

Duración total: 01:18:30

Código descargable

Acceso 100% online

Consejos prácticos para usar Chrome DevTools: navegación de paneles, edición CSS en tiempo real, consola avanzada, debugging con breakpoints, Network, Lighthouse y utilidades.

Qué vas a aprender

  1. 1Navegación y uso básico del panel Elements
  2. 2Depuración de JavaScript con breakpoints y debugger
  3. 3Funciones avanzadas de la consola ($0, $$, estilos, console.log)
  4. 4Edición y pruebas de estilos CSS en tiempo de ejecución
  5. 5Búsqueda en ficheros, source maps y paleta de comandos
  6. 6Análisis de tráfico con la pestaña Network (filtrado, bloquear, offline)
  7. 7Auditorías y diagnóstico con Lighthouse
  8. 8Herramientas de rendering: paint flashing, animaciones y recorder
  9. 9Gestión de storage y cookies (Application) y detección de cookies de terceros
  10. 10Extensiones útiles (React DevTools) y técnicas para eliminar modal/overlays

Explora los capítulos

1. Presentación [02:26]

Presentación

[00:50]

Recursos recomendados para aprender Developer Tools

[00:48]

Apertura de Developer Tools

[00:48]

2. Explicación del panel de Developer Tools y comandos básicos [05:47]

Explicación del panel de Developer Tools y comandos básicos

[00:44]

Uso del panel What's New y novedades

[00:50]

Console.log y estilos personalizados en la consola

[01:21]

Exploración del panel Elements y navegación por el DOM

[01:21]

Explicación de las herramientas para inspección de elementos (hover, añadir clases)

[01:31]

3. Explicación del Inspector Style Sheet y su uso [14:49]

Explicación del Inspector Style Sheet y su uso

[02:46]

Búsqueda y manipulación de estilos y especificidad en CSS 🔥

[05:55]

Modo responsive y simulación de dispositivos

[01:25]

Uso del panel Sources y acceso a los archivos cargados en el frontend

[04:43]

4. Uso del debugger y breakpoints en el código [34:01]

Uso del debugger y breakpoints en el código

[13:07]

Exploración del panel Network y análisis de carga de recursos

[07:03]

Herramientas para análisis de cookies de terceros

[02:51]

Generación de informes de rendimiento con Lighthouse

[07:38]

Uso avanzado de la consola y manipulación del DOM desde la consola

[03:22]

5. Funcionalidades avanzadas y herramientas adicionales en Developer Tools [21:27]

Funcionalidades avanzadas y herramientas adicionales en Developer Tools

[03:45]

Elegir un color con herramientas y extensiones

[01:07]

Ocultar y mostrar elementos con teclas 🔥

[00:22]

Accesibilidad y descarga de videos

[00:44]

Modificar velocidad de videos

[01:18]

Control de velocidad de animaciones

[00:47]

Eliminación de pop-ups 🔥

[01:26]

Capturas y grabación con extensiones 🔥

[02:30]

Uso de React Developer Tools

[01:24]

Trampas en GeoGuesser con frontend 🔥

[02:08]

Análisis de props en el DOM 🔥

[01:22]

Trampeo de Google y CPU

[04:34]

Suscríbete

Desde 15€/mes