Inspector CSS: ver y copiar CSS de cualquier elemento web

Abres el panel Elements de DevTools para encontrar el CSS de un solo elemento y te topas con un muro de reglas. Un inspector CSS hace lo contrario. Señalas el elemento y SuperchargeInspect te muestra los estilos que te interesan: la fuente, los colores y el espaciado. Los lees y luego haces clic en cualquier valor para copiarlo. SuperchargeInspect es una extensión de visor CSS que funciona en la página en la que estás, sin abrir DevTools.

Qué muestra el inspector CSS

El panel agrupa todo en tres secciones: Tipografía, Colores y Caja.

Tipografía. La familia de fuentes es la pila font-family declarada. El panel muestra la primera familia de la lista y copia la pila completa cuando la copias. Es la fuente que solicita la página. No comprueba qué fuente se renderiza realmente. También te da el tamaño de letra, el peso y el interlineado.

Colores. Obtienes el color del texto, el color de fondo y el color del borde, si lo hay. Los colores opacos se muestran en hex. Un color con transparencia parcial se muestra como el valor rgba() sin procesar, y uno totalmente transparente se muestra como transparent.

Caja. El padding y el margin se muestran en los cuatro lados. El panel indica gap, border-radius y display. Un diagrama del modelo de caja muestra las capas de margin, border y padding alrededor del contenido, con el ancho y el alto del contenido en píxeles CSS.

Cómo copiar valores CSS

Los valores CSS se copian de uno en uno. Cada valor del panel es un botón. Haz clic y ese valor concreto pasa a tu portapapeles, así puedes pegar solo padding-top o solo el color del texto.

Si quieres el conjunto completo, usa Copiar solo texto, en el menú Más formas de copiar. Incluye la lista completa de estilos observados del elemento: la familia de fuentes, el tamaño de letra, los colores, el diseño, gap, el padding y el margin de cada lado, y el radio.

Son los valores calculados que la página resolvió para este elemento. La familia de fuentes sigue siendo la pila declarada. La copia no recupera las reglas originales del autor, las definiciones de componentes ni la hoja de estilos original. Es una instantánea de lo que ves, no el código que escribió el sitio.

DevTools o un visor CSS

Chrome DevTools es la herramienta adecuada cuando necesitas cambiar las reglas. Ahí editas una hoja de estilos, sigues la cascada y descubres por qué un valor se impone a otro.

Un visor CSS responde a una pregunta más sencilla. Sirve para leer y copiar, no para reescribir las reglas del sitio. Puedes inspeccionar el CSS sin DevTools. Señala el elemento que quieras y toma los valores que te sirvan. La tabla compara ambos.

Usa DevTools para editar y depurar las reglas propias del sitio. Usa un visor CSS para leer un elemento y pasar sus estilos a otra herramienta.

Navegación con el teclado

Puedes hacer todo el proceso sin tocar el puntero. Pulsa Alt+Shift+E para empezar. Las teclas de flecha te llevan al elemento anterior o siguiente. Pulsa Ctrl+Up o Ctrl+Down para ir al elemento padre o a un elemento hijo. En macOS, usa Option+Up y Option+Down.

Pulsa Enter para fijar el elemento en el que estás. Pulsa Enter de nuevo para escribir una nota y luego Ctrl+Enter (Cmd+Enter en macOS) para Copiar referencia. Pulsa Esc para volver a seleccionar o cerrar el panel. Pulsa ? en cualquier momento para abrir una hoja con todos los atajos.

Todo se queda en tu dispositivo

SuperchargeInspect funciona en local. No hace llamadas de red ni envía nada a ningún sitio. No hay cuenta ni se recopilan datos en segundo plano.

Los estilos que inspeccionas nunca salen de tu dispositivo. Lo único que puede salir es un archivo que decidas guardar o un valor que pegues en otra app. Al cerrar el navegador, se borra el último elemento que recuerda.

¿Listo para pasárselo a una herramienta de programación? Muestra a una herramienta de IA para programar exactamente qué elemento cambiar.