Inicio

Curso de DevTools

Herramientas de desarrollador del navegador: inspección, debugging, red, storage y perfilado de rendimiento.

Tests

Pon a prueba tus conocimientos de DevTools.

Lecciones

10
1
Inspector
DevTools desde cero: qué son y cómo te hacen más rápido
Primera toma de contacto con las herramientas de desarrollador del navegador: para qué sirven, cómo abrirlas y qué paneles usar primero.
2
Inspector
Panel Elements y Styles: depura HTML/CSS como un pro
Aprende a inspeccionar nodos, localizar reglas CSS efectivas y probar cambios visuales en segundos sin tocar archivos todavía.
3
Inspector
Console y snippets: prueba hipótesis en segundos
Usa la consola para inspección rápida, ejecución puntual y snippets reutilizables que aceleran tu debugging diario.
4
Debugging
Sources y breakpoints: depuración paso a paso
Aprende a pausar ejecución, inspeccionar variables y seguir call stack para encontrar bugs reales en JavaScript.
5
Network
Network: lee peticiones como un ingeniero
Analiza latencia, estado HTTP, payloads y caché para localizar cuellos de botella y errores de integración.
6
Network
Application: storage, cookies y estado local
Inspecciona y depura almacenamiento del navegador para resolver problemas de sesión, persistencia y datos corruptos.
7
Performance
Lighthouse: audita rendimiento y accesibilidad con criterio
Ejecuta auditorías Lighthouse y traduce métricas en acciones concretas de mejora para UX y performance.
8
Performance
Performance y Memory: encuentra cuellos de botella reales
Registra perfiles de rendimiento, detecta long tasks y analiza consumo de memoria para evitar congelaciones y fugas.
9
Debugging
Debugging JavaScript pro: casos reales y estrategia
Consolida un método de depuración para bugs intermitentes, errores asíncronos y problemas de estado complejos.
10
Performance
Cierre DevTools: de usuario básico a diagnóstico profesional
Resumen de competencias del curso DevTools y plan práctico para consolidar un flujo de debugging y optimización en proyectos reales.
Página 1 de 1
Roadmap

Datos, Calidad y DevOps

Operación técnica: datos, testing, observabilidad, despliegue e infraestructura.

Calidad y rendimiento

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .