Chrome DevTools: editar CSS en tiempo real

Contenido del curso

Introducción

Elementos y Estilos

Mobile Simulation

JavaScript

Network

Performance

18
Optimización de animaciones con Performance DevTools
12:54 min

Audits

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:27

Chrome DevTools: editar CSS en tiempo real

Curso de Debugging con Chrome DevTools

Clase 4 de 22

Clase 4 / 22

Recursos

Aprende a usar el inspector de elementos de Chrome DevTools para ajustar CSS en tiempo real, identificar estilos activos en cada input, imagen y contenedor, y depurar estados como :hover sin tocar el HTML original. Con un flujo de trabajo simple, podrás prototipar visualmente y luego llevar los cambios a tu editor con confianza.

¿Cómo modificar CSS en tiempo real con Chrome DevTools?

Selecciona el elemento con el inspector de elementos y observa la sección de estilos. Verás las reglas aplicadas al nodo y a sus padres. Por ejemplo, un input dentro del contenedor principal puede heredar estilos de su padre, un div que agrupa un span (icono), el input y un anchor.

Usa el selector del inspector para elegir el elemento exacto.
Identifica el contenedor padre con sus clases, como el de “main input container”.
Ajusta propiedades como border y width y mira el resultado al instante.
Oculta o muestra elementos con display: none en imágenes (IMG).
Cambia el tamaño del input y del contenedor para validar el layout.

/* Cambios rápidos en el panel Styles */
width: 300px;
border: 10px solid #fff;
display: none;

¿Qué pasa con los estilos heredados del contenedor?

El contenedor padre concentra el estilo de varios hijos. Si el input “no tiene todos los estilos”, revísalo en el padre: allí suelen estar las reglas clave que definen bordes, tamaños y espaciamiento.

¿Cómo validar cambios sin tocar el HTML?

Modifica propiedades directamente en el panel de estilos. Observa qué reglas se activan o se sobreescriben y decide si deben vivir en el contenedor o en el hijo. Así evitas romper la estructura.

¿Qué flujo de trabajo acelera el prototipado de estilos?

Primero haz la maquetación básica en HTML, abre el proyecto en el navegador con un servidor local (por ejemplo, localhost) y comienza a estilizar en DevTools. Crea o prueba clases, ajusta valores y, cuando logres el resultado visual deseado, copia esas reglas a tu editor.

Abre el proyecto con un servidor local del editor si está disponible.
Itera estilos en el panel Styles antes de consolidarlos en tu CSS.
Si el diseño está “roto”, inspecciona y corrige desde el navegador.
Reubica elementos si hace falta con propiedades como position (absolute).
Ajusta números con las flechas del teclado para subir o bajar píxeles con precisión.
Deja bordes usualmente entre 1 y 3 píxeles para un acabado limpio.

/* Posicionar un elemento para corregir el layout */
position: absolute;

¿Cómo corregir un layout roto sin sorpresas?

Haz los cambios en el navegador y observa su impacto en otros componentes en tiempo real. Así evitas efectos colaterales y documentas qué reglas copiar a tu hoja de estilos.

¿Cómo afinar valores con precisión?

Coloca el cursor sobre un número en el panel y usa las flechas del teclado. Incrementa o decrementa hasta “sentir” el ajuste correcto y copia el valor final, por ejemplo, 515 px.

¿Cómo depurar estados con la pseudoclase :hover?

Activa el panel de estados (H hover) en DevTools para forzar la pseudoclase :hover. Verás qué elementos tienen este estado y qué reglas se aplican cuando el cursor está encima. Mantén el estado fijo mientras ajustas efectos como sombras y transiciones.

Activa hover desde el panel de estados para fijarlo.
Ubica las reglas marcadas con “:hover” y modifícalas con el estado activo.
Incrementa valores (por ejemplo, intensidad de sombras) y observa el cambio.
Desactiva hover para confirmar el comportamiento real al pasar el cursor.

¿Cómo identificar rápidamente todos los :hover activos?

Marca hover en el panel: el HTML resaltará los elementos afectados y, en la sección de estilos, verás las reglas con “:hover” listas para editar.

¿Tienes un truco favorito en Chrome DevTools para depurar CSS más rápido? Compártelo en los comentarios y enriquezcamos el flujo de trabajo de todos.

Ruben Vigil

Hace 6 años

Una lista de cosas geniales que puedes hacer con las DevTools de Chrome:

Aqui hay una lista de cosas que puedes hacer con las herramientas que Google Chrome provee:

Arrastrar elementos de HTML en el panel de elementos Se puede arrastrar cualquier elemento y cambiar su posición actual desde el panel de elementos !Drag and Drop Elements
Puedes seleccionar un nodo en el panel de elementos y escribir $0 en la consola para hacer referencia a él !Referencia a un elemento
Usar el valor de la última operación en la consola Puedes usar $_ para referenciar el valor retornado de la operación anterior ejecutado en la consola !referenciar el valor retornado
Encontrar donde está definida una propiedad en CSS Si presionamos ctrl + click a una propiedad CSS en el panel de elementos, las DevTools nos llevaran al lugar donde están definidas en el código fuente !Encontrar CSS en codigo fuente
Hacer screenshot a un elemento Seleccionar un elemento y presionar ctrl + shift + p para abrir el menú de comandos y seleccionar Capture node screenshot !Hacer screenshot a un elemento
Encontrar elementos usando selectores de CSS Si presionamos ctrl + F en el panel de elementos, se abre la barra de búsqueda. Podemos buscar elementos por cadenas de texto y también podemos buscar elementos usando selectores CSS !Encontrar elementos usando selectores de CSS Estas son algunas de las geniales funcionalidades de las DevTools, comparto un link donde podemos ver una lista más extensa y detallada de ello: Lista de cosas que puedes hacer desde tus DevTools y que tal vez no sabías

Victor Andres Castillo Zambrano

Hace 6 años

buenisimo

Juan Suaza

Hace 5 años

Excelente

Comentarios (41)41 comentarios

David Higuera

Irving Juárez

Jesus Sandoval

Hace 4 años

Sneyder Barreto

Hace 7 años

Emmanuel Rodríguez

Juan Jiménez

Carlos Antonio Espin Constante

jorge llanque

Josue Cerron Tuesta

Carlos Eduardo Gomez García

Christian David Sánchez

Alex Leonardo Rodriguez Carvajal

María Sierra

Matías Wasiak

Jimmy Buriticá Londoño

Mariel Gonzalez Yescas

Angel Fernando Quiroz Campos

CRISTIAN BARBERO PÉREZ

Jose Roberto Orozco Bazua

Andres Gallego

FELIX EVR

Juan Carlos Valencia López

Christian Velázquez

Efraín Hernández García

Cristofher Jumbo Jimenez

Isaac Bryan Ascanoa Roncall

Brian Domínguez Vázquez

Introducción

Debugging con Dev Tools: curso intermedio

Qué son las Chrome Dev Tools y cómo abrirlas

Elementos y Estilos

Manipular HTML con DevTools Elements

Chrome DevTools: editar CSS en tiempo real

Selector de colores DevTools en Chrome

Generar sombras CSS con Chrome DevTools

Animaciones CSS con Dev Tools: timing y velocidad

Midiendo código no utilizado con DevTools Coverage

JavaScript con DOM en Dev Tools

Cómo guardar cambios de DevTools en archivos locales

Mobile Simulation

DevTools para proyectos responsive

DevTools simula red lenta y CPU débil para probar

JavaScript

Cómo debuguear JavaScript con DevTools

Debuggear concatenación con DevTools

Network

Proyecto de Clase Disponible en Platzi

Network en DevTools: qué se descarga y pesa

Cómo usar Network para depurar peticiones HTTP

Performance

Optimización de animaciones con Performance DevTools

Audits

Auditorías móviles con Dev Tools

DevTools: auditoría desktop vs mobile

Cierre

Examen y siguientes cursos tras Dev Tools

Qué es una Progressive Web App

Chrome DevTools: editar CSS en tiempo real