Como la mayoría de los desarrolladores web, ocasionalmente me gusta mirar la fuente de los sitios web para ver cómo se construye su marcado. Herramientas como Firebug y Chrome Developer Tools facilitan la inspección del código, pero si quiero copiar una sección aislada y jugar con ella localmente, sería difícil copiar todos los elementos individuales y sus CSS asociados. Y probablemente tanto trabajo para salvar la fuente completa y cortar el código no relacionado.

Sería genial si pudiera hacer clic derecho en un nodo en Firebug y tener la opción "Guardar HTML + CSS para este nodo". ¿Existe tal herramienta? ¿Es posible extender Firebug o Chrome Developer Tools para agregar esta función?

SnappySnippet

Finalmente encontré algo de tiempo para crear esta herramienta. Puede instalar SnappySnippet desde Github. Permite una extracción fácil de HTML + CSS desde el nodo DOM especificado (la última inspección). Además, puede enviar su código directamente a CodePen o JSFiddle. ¡Disfrutar!

Otras características

• limpia HTML (elimina atributos innecesarios, arregla sangría)
• optimiza CSS para que sea legible
• totalmente configurable (todos los filtros se pueden apagar)
• trabaja con ::beforey ::afterpseudo-elementos
• interfaz de usuario agradable gracias a Bootstrap y Flat-UI proyectos

Código

SnappySnippet es de código abierto, y puedes encontrar el código en GitHub .

Implementación

Como he aprendido mucho mientras hacía esto, he decidido compartir algunos de los problemas que he experimentado y mis soluciones, tal vez alguien lo encuentre interesante.

Primer intento: getMatchedCSSRules ()

Al principio, intenté recuperar las reglas CSS originales (procedentes de archivos CSS en el sitio web). Sorprendentemente, esto es muy simple gracias window.getMatchedCSSRules(), sin embargo, no funcionó bien. El problema era que solo estábamos tomando una parte de los selectores HTML y CSS que coincidían en el contexto de todo el documento, que ya no coincidían en el contexto de un fragmento de HTML. Dado que analizar y modificar selectores no parecía una buena idea, renuncié a este intento.

Segundo intento: getComputedStyle ()

Entonces, he comenzado a partir de algo que @CollectiveCognition sugirió - getComputedStyle(). Sin embargo, realmente quería separar el HTML del formulario CSS en lugar de incluir todos los estilos.

Problema 1: separación de CSS de HTML

La solución aquí no era muy hermosa, pero bastante sencilla. Asigné ID a todos los nodos en el subárbol seleccionado y usé esa ID para crear reglas CSS apropiadas.

Problema 2: eliminar propiedades con valores predeterminados

Asignar ID a los nodos funcionó muy bien, sin embargo, descubrí que cada una de mis reglas CSS tiene ~ 300 propiedades que hacen que todo el CSS sea ilegible.
Resulta que getComputedStyle()devuelve todas las propiedades y valores CSS posibles calculados para el elemento dado. Algunos de ellos estaban vacíos, otros tenían valores predeterminados del navegador. Para eliminar los valores predeterminados, primero tenía que obtenerlos del navegador (y cada etiqueta tiene diferentes valores predeterminados). La solución fue comparar los estilos del elemento proveniente del sitio web con el mismo elemento insertado en un vacío <iframe>. La lógica aquí es que no hay hojas de estilo en un espacio vacío <iframe>, por lo que cada elemento que he agregado allí solo tenía estilos de navegador predeterminados. De esta forma pude deshacerme de la mayoría de las propiedades que eran insignificantes.

Problema 3: mantener solo las propiedades abreviadas

Lo siguiente que descubrí fue que las propiedades con equivalentes abreviados se imprimieron innecesariamente (por ejemplo, había border: solid black 1pxy luego border-color: black;, border-width: 1pxitd.).
Para resolver esto, simplemente he creado una lista de propiedades que tienen equivalentes abreviados y los he filtrado de los resultados.

Problema 4: eliminar propiedades prefijadas

El número de propiedades en cada regla se reduce significativamente después de la operación anterior, pero he encontrado que me tenía alféizar de una gran cantidad de -webkit-propiedades prefijadas que he nunca se oye de ( -webkit-app-region? -webkit-text-emphasis-position?).
Me preguntaba si debería conservar alguna de estas propiedades porque algunas parecían útiles ( -webkit-transform-origin, -webkit-perspective-originetc.). Sin embargo, no he descubierto cómo verificar esto, y como sabía que la mayoría de las veces estas propiedades son solo basura, decidí eliminarlas todas.

Problema 5: combinar las mismas reglas CSS

El siguiente problema que descubrí fue que las mismas reglas CSS se repiten una y otra vez (por ejemplo, para cada uno <li>con exactamente los mismos estilos, se creó la misma regla en la salida CSS).
Esto era solo una cuestión de comparar reglas entre sí y combinarlas que tenían exactamente el mismo conjunto de propiedades y valores. Como resultado, en lugar de lo #LI_1{...}, #LI_2{...}que tengo #LI_1, #LI_2 {...}.

Problema 6: limpieza y reparación de sangría de HTML

Como estaba contento con el resultado, me mudé a HTML. Parecía un desastre, principalmente porque la outerHTMLpropiedad lo mantiene formateado exactamente como fue devuelto por el servidor.
Lo único que se outerHTMLnecesitaba del código HTML era un simple reformateo de código. Como es algo disponible en cada IDE, estaba seguro de que hay una biblioteca de JavaScript que hace exactamente eso. Y resulta que tenía razón (jquery-clean) . Además, tengo atributos de eliminación de atributos innecesarios adicionales ( style, data-ng-repeatetc.).

Problema 7: filtros que rompen CSS

Dado que existe la posibilidad de que en algunas circunstancias los filtros mencionados anteriormente puedan romper CSS en el fragmento, los he hecho todos opcionales. Puede deshabilitarlos desde el menú Configuración .

Originalmente hice esta pregunta. Estaba buscando una solución de Chrome (o FireFox), pero me encontré con esta característica en las herramientas de desarrollador de Internet Explorer. Más o menos lo que estoy buscando (excepto el javascript)

Resultado:

Los navegadores Webkit (no estoy seguro acerca de FireBug) le permiten copiar fácilmente el HTML de un elemento, por lo que esa es una parte del proceso.

Al ejecutar esto (en la consola de JavaScript) antes de copiar el HTML para un elemento, se moverán todos los estilos calculados para el elemento principal proporcionado, así como todos los elementos secundarios, al atributo de estilo en línea que luego estará disponible como parte del HTML .

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

Es un truco total y tendrás muchos atributos css "basura" para navegar, pero al menos deberías comenzar.

Creé esta herramienta hace años con el mismo propósito:
http://www.betterprogramming.com/htmlclipper.html

Puedes usarlo y mejorarlo.

Esto se puede hacer con Firebug Plugin llamado scrapbook

Puede verificar la opción de Javascript en la configuración

Editar:

Esto también puede ayudar

Firequark es una extensión de Firebug para ayudar al proceso de Scraping de pantalla HTML. Firequark extrae automáticamente el selector css para uno o varios nodos html de una página web usando Firebug (un complemento de desarrollo web para Firefox). El selector css generado se puede proporcionar como una entrada a los raspadores de pantalla html como Scrapi para extraer información. Firequark está diseñado para liberar el poder del selector css para usar el raspado de pantalla html.

divclip es una versión actualizada de htmlclipper de Florentin Sardan

con mejoras modernas: ES5, HTML5, CSS con alcance ...

puedes extraer programáticamente un div estilizado con:

var html = require("divclip").bySel(".article-body");
console.log(html);

Disfrutar.

No se necesitan complementos. Se puede hacer de manera muy simple con las Herramientas de desarrollo nativas de Internet Explorer 11 con solo un clic, muy limpio. Justo en un elemento e inspeccione ese elemento, haga clic derecho en algún bloque y elija "Copiar elemento con estilos". Puedes verlo en la imagen de abajo.

Proporciona el código CSS muy limpio, como

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Últimamente creé una extensión de Chrome "eXtract Snippet" para copiar el elemento inspeccionado, html y solo las consultas relevantes de CSS y medios de una página. Tenga en cuenta que esto le daría el CSS relevante real

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

No conozco una herramienta con una única solución para esto, pero puede usar la extensión Firebug y Web Developer al mismo tiempo.

Use Firebug para copiar la sección html que necesita (Inspeccionar elemento) y Desarrollador web para ver qué CSS está asociado con un elemento (Llamar al desarrollador web "Ver información de estilo" - funciona como el "Inspeccionar elemento" de Firebug, pero en lugar de mostrar el html marcado muestra el CSS asociado con ese marcado).

No es exactamente lo que quieres (un clic para todo), pero está bastante cerca, y al menos es intuitivo.

¡También necesito esta función en Firebug! Hasta entonces, otro enfoque es utilizar este servicio en línea para eliminar clases y convertir el CSS a estilos en línea.

http://clipboardjs.com hace esto y bastante bien. Aunque su expectativa de que la versión copiada sea exactamente igual que la original para que pueda jugar y aprender con ella, puede no ser realista.

Simplemente copie la parte que desea de la página web y péguela en el editor wysiwyg. Verifique la fuente html haciendo clic en el botón "fuente" en la barra de herramientas del editor.

He encontrado la forma más fácil cuando estaba trabajando en un sitio de Drupal. Yo uso wysiwyg CKeditor.

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

uso:$("#login_wrapper").getStyles()

He adaptado la respuesta más votada como un marcador dragabble.

Simplemente visite esta página y arrastre el botón "Ejecutar código jQuery" a su barra de marcadores.

Hay un complemento de Firefox que guarda todo el HTML, CSS, etc. de la página, pero no he visto uno que guarde parcialmente.

Sin embargo, recuerdo que IE 5.5 tenía lo que estabas buscando;)

Revisé todas las herramientas mencionadas como respuesta aquí. Pero dan CSS CSS repetidos y sucios con una cara hermosa que estabas mirando. No te dan JS.

Lo que hago:

1. Primero filtro los anuncios que no se requieren en la página
2. Luego, guarde la página web completa junto con los recursos de enlace.
3. Eliminar HTML, CSS y JS innecesarios
4. mantenga los recursos sin vinculación uno por uno con cuidado.