Aprende a copiar el código fuente HTML y CSS de un elemento rápidamente con SnappySnippet en Google Chrome.

Cómo obtener el código fuente HTML y CSS de un elemento DOM con Google Chrome y la extensión SnappySnippet

Como desarrollador web, a veces puede mirar el código fuente de muchos sitios web para ver cómo se construye el código de marcado, CSS y JavaScript. Puede encontrar piezas demasiado interesantes de elementos DOM que parecen bastante interesantes y es posible que desee copiar esa característica en uno de sus proyectos sin descargar un Framework completo para usar solo, por ejemplo, el estilo de un botón porque eso es simplemente ridículo.

Si realmente desea ese botón, deberá inspeccionar el código, copiar el marcado y leer qué clases usa. Pero eso es bastante tortuoso y pasarás demasiado tiempo haciéndolo.

¿Y si pudiera haber una forma de automatizar esa tarea para usted? Bueno, te presento SnappySnippet,  una extensión increíble para hacer este trabajo duro por ti.

SnappySnippet es una extensión de DevTools que le permite extraer CSS y HTML del subárbol DOM seleccionado (último elemento inspeccionado). Luego, con solo un clic, puede enviar el código seleccionado a CodePen, jsFiddle o JS Bin.

Requisitos

Cómo usar SnappySnippet

Después de la instalación de la extensión SnappySnippet en su navegador, usarla será pan comido.

Inspecciona un elemento que te parezca interesante en un documento, en este caso inspeccionaremos un simple botón de boostrap.

Inspeccione la consola de Chrome

Luego, explore las pestañas de la consola y vaya a la pestaña SnappySnippet .

Ir a la pestaña SnappySnippet

Finalmente haga clic en el "Create a snippet from inspected element"botón.

Obtenga HTML y CSS del elemento inspeccionado Chrome

El marcado se mostrará en el área de texto HTML y el código CSS requerido para hacer que el elemento se vea como está, se mostrará en el área de texto CSS en el área izquierda.

Puede ver una vista previa del fragmento, enviar el código (en un formulario POST a través de los botones) a diferentes sandbox en línea y ver cómo se ven sus fragmentos. Si no está satisfecho con el resultado, puede intentar personalizar la configuración de SnappySnippet en el botón Configuración para incluir elementos ancestrales en el fragmento y otras cosas como prefijos, clases mixtas, etc.

La siguiente imagen muestra el código requerido para mostrar un botón de arranque simple de la primaryclase, que se muestra en jsBin.

Ejemplo de fragmento en jsBin

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores