Taller de Chrome Developer Tools
Un repaso a las características mágicas de la herramienta para desarrolladores en Google Chrome.
Duración total: 01:18:30
Código descargable
Acceso 100% online
¿Qué aprenderás en este vídeo?
Descripción de la masterclass
Este directo es para la Comunidad Malandriner de suscriptores de Web Reactiva Premium.
El developer tools de Google Chrome es una de las herramientas más poderosas para desarrolladores web. Si alguna vez te has preguntado cómo puedes inspeccionar, modificar y optimizar cualquier web directamente desde tu navegador, este es el taller ideal para entenderlo.
Ventajas de usar el developer tools
- Acceso directo al código de la web: Inspecciona y edita el DOM, ajusta estilos CSS, y experimenta con el diseño de una página en tiempo real.
- Depuración avanzada: Configura breakpoints, analiza el flujo de ejecución de tu JavaScript y resuelve problemas complejos con mayor facilidad.
- Monitorización de red: Examina todas las solicitudes de red, el rendimiento de la carga y los recursos utilizados por la página.
- Simulación de dispositivos y redes: Visualiza cómo se ve tu página en diferentes dispositivos y condiciones de red, desde conexiones lentas hasta cortes totales.
- Análisis de rendimiento: Con herramientas como Lighthouse, puedes obtener una evaluación detallada del rendimiento, accesibilidad, SEO y mejores prácticas de tu sitio web.
Herramientas principales del developer tools
1. Inspección del DOM y manipulación de estilos CSS
La pestaña Elements te permite navegar por la estructura del DOM de la página. Desde aquí puedes:
- Editar directamente el HTML y ver cómo los cambios se reflejan en tiempo real.
- Modificar los estilos CSS, añadir nuevas reglas o ajustar las existentes para ver cómo afectan al diseño.
- Utilizar shortcuts como
$0
para interactuar con elementos seleccionados desde la consola.
2. Depuración de JavaScript con breakpoints
La depuración de código JavaScript se realiza desde la pestaña Sources. Esta herramienta permite:
- Establecer breakpoints en el código para detener la ejecución y analizar el estado de la aplicación.
- Examinar las variables y su contenido en el momento exacto de la ejecución.
- Utilizar herramientas como
console.log
de forma más eficiente, capturando la salida sin recargar la página.
3. Monitorización de peticiones de red con Network
En la pestaña Network puedes visualizar todas las peticiones que realiza tu página al servidor:
- Filtrar por tipos de peticiones (fetch, XHR) y examinar cómo se cargan los recursos.
- Analizar los tiempos de carga y optimizar el rendimiento reduciendo los recursos innecesarios.
- Ver qué peticiones se cargan desde la caché y cuáles se envían directamente al servidor.
4. Simulación de dispositivos y condiciones de red
El developer tools te permite emular diferentes dispositivos, desde teléfonos móviles hasta tablets:
- Ajusta la resolución y ve cómo tu sitio se adapta a diferentes tamaños de pantalla.
- Simula conexiones lentas para ver cómo afecta el rendimiento de tu web en condiciones de red desfavorables.
5. Gestión de cookies y almacenamiento local
Desde la pestaña Application puedes gestionar cookies, almacenamiento local y sesiones:
- Examina las cookies de tu sitio y comprueba si existen cookies de terceros que puedan requerir el consentimiento del usuario.
- Visualiza y edita el contenido del almacenamiento local y de la sesión para depurar aplicaciones web complejas.
6. Análisis de rendimiento con Lighthouse
Lighthouse es una herramienta integrada que te ofrece un análisis detallado del rendimiento de tu sitio web:
- Identifica problemas de carga y rendimiento y obtén recomendaciones para mejorar.
- Evalúa la accesibilidad de tu sitio y las prácticas de SEO para optimizar su visibilidad en motores de búsqueda.
- Genera informes que puedes exportar para compartir con tu equipo o cliente.
Consejos avanzados para aprovechar al máximo el developer tools
1. Uso de comandos en consola
Puedes seleccionar elementos del DOM y manipularlos directamente desde la consola con comandos como $0
, que hace referencia al último elemento seleccionado. Además, puedes usar $1
, $2
, etc., para acceder a elementos previamente seleccionados.
2. Modificación y pruebas en tiempo real
Si trabajas con estilos CSS complejos o quieres probar un nuevo diseño sin modificar tu código directamente, puedes hacerlo desde la pestaña Elements. Aquí puedes añadir nuevas clases, cambiar colores, márgenes y ver los resultados al instante.
3. Simulación de estados CSS
Puedes forzar estados CSS como :hover
, :focus
o :active
desde el panel de Elements, lo que te permite ver cómo se comportarán los elementos interactivos sin necesidad de usar el ratón o el teclado.
4. Análisis y optimización de scripts
Desde la pestaña Sources, utiliza la opción de Coverage para ver qué partes de tu CSS y JavaScript no se están utilizando y optimizar tu código eliminando lo innecesario.
5. Control de animaciones
Si tu página tiene animaciones CSS, puedes ralentizarlas o detenerlas para analizar su funcionamiento. Esto es especialmente útil para ajustar efectos de transición y asegurar una experiencia de usuario suave.
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]
Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva
Contenido nuevo todas las semanas
Una comunidad de developers colegas en telegram
Desafíos y retos de programación para que mejores tus habilidades
400 horas de contenido en audio y vídeo
Entrevistas y masterclass en directo con los/las mejores profesionales
Precio
24€Matrículaplus15€Al mes
- Contenido disponible 24/7
- Audios y videos
- Retos y desafíos
- Todo el código descargable
- Comunidad de developers
- Acceso premium completo