Aprende a inspeccionar nodos, localizar reglas CSS efectivas y probar cambios visuales en segundos sin tocar archivos todavía.
Este panel te ahorra horas: seleccionas un elemento y ves <strong>qué estilos se aplican de verdad</strong>, no lo que crees que debería pasar 👀.
Vas a practicar cómo detectar reglas sobrescritas, márgenes inesperados y layouts rotos sin tocar el código fuente de entrada.
Si aún te cuesta la cascada, revisa <a href="/curso/css/leccion/css-cascada-basico">la lección de cascada en CSS</a> y vuelve.
Inspección primero, cambio después.
Con el selector de elemento eliges un nodo exacto del DOM y observas atributos, clases y posición en jerarquía.
En <code>Styles</code> verás reglas activas y reglas tachadas (sobrescritas por especificidad, orden o <code>!important</code>).
Cuando algo
Si el layout se rompe, abre <code>Computed</code> para ver valores finales (ej: width real tras herencia/cálculos).
El Box Model visual te permite detectar rápidamente márgenes, padding o border responsables del problema.
Aprende a inspeccionar nodos, localizar reglas CSS efectivas y probar cambios visuales en segundos sin tocar archivos todavía.
Código del tema: Diagnostico real en navegador
Inspección primero, cambio después.
Con el selector de elemento eliges un nodo exacto del DOM y observas atributos, clases y posición en jerarquía.
En Styles verás reglas activas y reglas tachadas (sobrescritas por especificidad, orden o !important).
<article class="card">
<h2 class="card__title">Curso DevTools</h2>
<p class="card__desc">Depura sin adivinar.</p>
</article>Cuando algo
Si el layout se rompe, abre Computed para ver valores finales (ej: width real tras herencia/cálculos).
El Box Model visual te permite detectar rápidamente márgenes, padding o border responsables del problema.