Herramientas para copiar selectivamente HTML + CSS + JS de sitios existentes [cerrado]


403

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?


44
Solo quería agregar (no es una herramienta como la describe, por lo que no responde), si usa Chrome puede seleccionar un elemento y mirar el "Estilo calculado" a la derecha en la sección CSS. Podrías copiar y pegar toda la lista en un estilo. Es un paso adicional de la herramienta que desea, pero le brinda el CSS que está buscando.
riv_rec

1
No es una respuesta completa a su pregunta, pero F2 en las herramientas de desarrollo de Chrome en la pestaña "Elementos" abrirá el elemento DOM y el subárbol elegidos para la edición en línea (y copiar si lo desea).
10gistic

Una extensión muy interesante de Chrome es el "Guardar todos los recursos". ¡Instálelo y luego navegue hasta el "Ahorrador de recursos" de la pestaña Herramienta de desarrollo de Chrome y descárguelo!
dimeros

Respuestas:


580

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!

Extensión SnappySnippet Chrome

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 .


@KonradDzwinel, estoy buscando una manera de hacer esto mediante programación dentro de una página (para imprimir un subárbol DOM específico, simplemente cópielo en una nueva ventana y print()). ¿Qué tan difícil sería (para usted o para alguien que busca bifurcar su repositorio) hacer esto solo en JS como una función invocable?
Hashbrown

@Hashbrown Envíame un correo electrónico y podremos hablar de detalles. Creo que será bastante simple.
Konrad Dzwinel

@KonradDzwinel muchas gracias por el esfuerzo, pero ¿qué pasa si quiero obtener el elemento de nodo con la función php 'file_get_contents ($ url)', hay alguna solución, aquí está mi publicación: stackoverflow.com/questions/21419857/ ...
Yassine edouiri

¡Buen trabajo! pero, ¿es posible incluir el código js que actúa sobre el elemento?
t31321

1
@KonradDzwinel alguien ya me ha derrotado: github.com/kdzwinel/SnappySnippet/issues/37 .
David Keaveny

52

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)

Fuente del elemento con estilo

Resultado:

Fuente de elemento con resultado de estilo


55
IE11 también funciona. Pero la opción es accesible desde el clic derecho directamente en el elemento.
Rodolfo Jorge Nemer Nogueira

15
¡Guau, finalmente un ejemplo en el que los devtools de IE son superiores!
dmnd

77
La mejor solución que he intentado comparar con todos los demás enumerados en esta página. El CSS + HTML generado es súper limpio mientras mantiene los nombres css originales, lo que significa que el html es el mismo que el original.
xoofx

Santa mierda que es increíble. Puede confirmar los hallazgos de @xoofx de que el marcado HTML sigue siendo el mismo, pero quería comentar más a fondo que también genera elementos de envoltura principal esqueleto necesarios para que realmente coincidan con el estilo.
Daniel Sokolowski

Usé esto. No se pudo hacer que el fragmento ágil funcione correctamente (html y css complejos). No puedo creer que esto realmente haya funcionado. Y para que la gente sepa, no vi esta característica en Edge Just Explorer.
Watson

51

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.


3
Gran respuesta, pero ... sin relación con la respuesta real, ¿qué pasa con la sintaxis de bucle for ...? Se lee como ofuscado para mí.
Steve Campbell

1
Esto es genial, simplemente pierde el elemento raíz. Agregue esto también: el.setAttribute ("style", window.getComputedStyle (el) .cssText);
Karman Kertesz

en la consola de Chrome, .querySelector me devolvió un valor nulo. Así que cámbielo a lo siguiente y funcionó: var el = document.getElementById ("# someid"); el.setAttribute ("estilo", window.getComputedStyle (el) .cssText); var els = el.getElementsByTagName ("*"); for (var i = -1, l = els.length; ++ i <l;) {els [i] .setAttribute ("estilo", window.getComputedStyle (els [i]). cssText); }
Viktor Tango


25

Esto se puede hacer con Firebug Plugin llamado scrapbook

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

ingrese la descripción de la imagen aquí

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.


Scrapbook se ve muy bien, desafortunadamente tanto la última versión (1.4.5) como la anterior recomendada en las revisiones (1.4.3) no funcionarían para mí en OSX / FF3.6.1. ¿Alguien tiene esto funcionando?
peteorpeter

Desearía poder seleccionar con mayor precisión un nodo para guardar, pero esto funcionó bastante bien
Kenwarner

1
Esto es un poco útil, pero no resolvió mi necesidad de mover un elemento de página con CSS requerido a otra página. Scrapbook copia todas las páginas css, ya sea que sea necesario o no para la parte seleccionada de la página, y no reescribe el css que ayudaría a evitar que los estilos colisionen con el css de otra página.
mc0e

13

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.


¡muy buena! ¡Funciona de maravilla! Hice alguna modificación para que pueda ejecutarse en Chrome. simplemente elimine la dependencia 'exportar' y 'requerir' y cópielos en el fragmento de Chrome. luego puede en la consola, escriba copy(divclip.bySel('.topbar'))lo que copiará la salida procesada en el portapapeles. ;)
Ken

tiene un error: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 Error al ejecutar 'postMessage' en 'DOMWindow': el origen de destino proporcionado (' portal.office.com' ) no coincide con el origen de la ventana del destinatario ('nulo').
Slava

10

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;
}

Wow, esto funcionó perfectamente en Microsoft Edge. Intenté htmlclipper y snappysnippet pero tuve problemas para retener la capacidad de respuesta de los elementos que estoy tratando de copiar.
Matt

Esto es sorprendente, funciona perfectamente bien.
snit80

5

Ú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


Me gusta cómo mantiene todos los selectores como en el original.
hajamie

1
¿Cómo se compara esto con la extensión de Snappy Snippet Chrome?
Patoshi パ ト シ

3

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.

Resultado de 'Ver información de estilo' de la Extensión para desarrolladores web


Esto es lo que hago, pero implica copiar manualmente el CSS para cada elemento. Lo que creo que el OP quiere idealmente es algo que pueda copiar los estilos CSS que afectan a un elemento y a todos los elementos anidados, copiándolo de una vez como lo hace para el HTML.
Muhd

3

¡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.


3

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.


2

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.


2
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()


Para mi necesidad, esto parece bastante prometedor, ya que evita las limitaciones de getComputedStyle. Soy demasiado novato de JavaScript para estar seguro de cómo usarlo para obtener el texto real del CSS.
mc0e

He cambiado el uso para usar en jQuerylugar de $, lo que me pone un poco difícil, pero ahora recibo ¿ SecurityError: The operation is insecure. Alguna sugerencia?
mc0e

0

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.


1
Da un error: Error: SyntaxError: literal de cadena sin terminar
Barney

@Barney: quiere decir, debes copiar la respuesta allí y hacer un fragmento de eso. no es la respuesta, pero sugiero que sea un comentario en lugar de una respuesta
Mo Hrad A


0

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.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.