GratisExtensión para Chrome y Firefox
Copia el HTML y CSS de cualquier elemento
HTML/CSS Extractor añade una pestaña al panel Elementos de DevTools. Selecciona un elemento y te muestra su HTML y las reglas CSS que le dan estilo, listos para editar, previsualizar y copiar.
Capturas de pantalla
Cómo funciona
Abre DevTools en cualquier sitio web: presiona F12, o Cmd+Option+I en Mac.
Selecciona un elemento en el panel Elementos (el Inspector en Firefox), o haz clic derecho sobre él en la página y elige Inspeccionar.
Abre la pestaña HTML/CSS Extractor en la barra lateral del panel, junto a Calculados.
Revisa la vista previa en vivo, edita el código si quieres y haz clic en «Copy CSS» o «Copy HTML».
Qué hace
Las reglas que se aplican
Las reglas CSS de las hojas de estilo de la página que coinciden con el elemento y con todo lo que contiene, incluidas las reglas :hover, ::before y ::after, y las media queries en su orden original.
Selectores más cortos
Los selectores largos se acortan a la forma más corta que sigue coincidiendo, con un comentario que muestra el selector original y su especificidad.
Vista previa en vivo
Mira el código extraído con ancho de móvil (375 px), tableta (768 px) o escritorio (1240 px). Los enlaces de la vista previa no navegan.
Edita y copia
El CSS y el HTML se abren en editores separados con resaltado de sintaxis, números de línea y plegado de código. Copia cualquiera de los dos con un clic.
URL completas
Las direcciones relativas de imágenes, fuentes y enlaces se convierten en URL completas, para que el código siga funcionando al pegarlo en otro sitio.
Fuentes y variables
Incluye, si quieres, las reglas @font-face de la página, y marca las variables CSS que el código extraído nunca usa.
Estilos heredados
Añade, si quieres, los estilos de texto que el elemento hereda de sus padres, como la fuente y el color, en un contenedor alrededor del HTML.
Sigue tu selección
La pestaña se actualiza cada vez que seleccionas otro elemento. Seis interruptores controlan qué se incluye, y tus elecciones se recuerdan.
Privacidad por diseño
- Sin cuenta ni registro.
- Solo funciona dentro de DevTools, sobre el elemento que selecciones.
- Tus ajustes se guardan solo en tu navegador. El código que extraes no se guarda.
- Sin analíticas, sin rastreo y sin anuncios. Nada de lo que extraes se envía a ningún sitio.
Gratis y sin cuenta
Todo incluido
- HTML y CSS de cualquier elemento
- Simplificación de selectores
- Vista previa en vivo con tres anchos de pantalla
- Editores de código con copia en un clic
- Seis ajustes de extracción, que se recuerdan entre sesiones