Como la mayoría de los desarrolladores web, me gustaría de vez en cuando a mirar el código fuente de los sitios web para ver cómo su margen de utilidad es construido. Herramientas como Firebug y Herramientas para Desarrolladores de Chrome hacen que sea fácil para inspeccionar el código, pero si quiero copiar un aislado de sección y jugar con ella a nivel local, sería un dolor para copiar todos los elementos individuales y sus asociados css. Y, probablemente, sólo como mucho trabajo para guardar toda la fuente y cortar el no relacionados de código.

Sería genial si pudiera haga clic en un nodo de Firebug y tiene un «Guardar HTML+CSS para este nodo» opción. Hace una herramienta de este tipo existen? Es posible extender el Firebug o Herramientas para Desarrolladores de Chrome para añadir esta característica?

  • Sólo quería añadir (no una herramienta para describir, así que no tomar una respuesta), si utilizas chrome, usted puede seleccionar un elemento y mirar el «Calculada Estilo» a la derecha, en la sección css. Usted sería capaz de copiar-pegar la lista completa en un estilo. Es un paso adicional de una herramienta que desea, pero da la css que usted está buscando.
  • No es una respuesta completa a su pregunta, pero de F2 en Chrome dev tools en los «Elementos» de la pestaña se abrirá el elegido elemento de DOM y del subárbol para la edición en línea (y la copia si lo desea).
InformationsquelleAutor kenwarner | 2011-02-06

16 Comentarios

  1. 552

    SnappySnippet

    Por fin he encontrado algo de tiempo para crear esta herramienta. Usted puede instalar SnappySnippet desde Chrome Web Store. Permite el fácil HTML+CSS extracción de la especificada (última inspección) nodo DOM. Además, usted puede enviar su código directamente a CodePen o JSFiddle. ¡A disfrutar!

    Herramientas para copiar selectivamente HTML+CSS+JS de los sitios existentes

    Otras características

    • limpia de HTML (extracción de atributos innecesarios, la fijación de sangría)
    • optimiza el CSS para hacerlo legible
    • totalmente configurable (todos los filtros se puede desactivar)
    • trabaja con ::before y ::after pseudo-elementos
    • interfaz de usuario agradable gracias a Bootstrap & Tv de interfaz de usuario proyectos

    Código

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

    Aplicación

    Ya que he aprendido bastante mucho al hacer esto, he decidido compartir algunos de los problemas que yo he experimentado y mis soluciones para ellos, tal vez a alguien le resulte interesante.

    Primer intento – getMatchedCSSRules()

    Al principio he tratado de recuperar las reglas CSS (procedente de los archivos CSS en el sitio web). Bastante sorprendentemente, esto es muy sencillo gracias a window.getMatchedCSSRules(), sin embargo, no salió bien. El problema era que estábamos tomando sólo una parte de HTML y CSS selectores que fueron coincidentes en el contexto de la totalidad del documento, que no fueron coincidentes en el contexto de un fragmento de código HTML. Desde el análisis y la modificación de los selectores no parecía una buena idea, me di por vencido en este intento.

    Segundo intento – getComputedStyle()

    Entonces, he empezado a partir de algo que @CollectiveCognition sugirió – getComputedStyle(). Sin embargo, yo realmente quería separar de CSS formulario HTML en lugar de inline todos los estilos.

    Problema 1 – la separación de CSS en HTML

    Aquí la solución no era muy hermosa, pero bastante sencillo. He asignado los Identificadores de todos los nodos en el subárbol y utiliza ese ID para crear las reglas de CSS.

    Problema 2 – la eliminación de las propiedades con valores por defecto

    La asignación de los Identificadores de los nodos funcionó muy bien, sin embargo me enteré de que cada una de mis reglas CSS ha ~300 propiedades haciendo que todo el CSS ilegible.

    Resulta que getComputedStyle() devuelve todas las posibles propiedades de CSS y valores calculados para el elemento dado. Algunos de ellos, donde vacíos, algunos habían navegador valores por defecto. Para eliminar los valores por defecto tenía que llegar a ellos desde el navegador (y cada marca tiene diferentes valores por defecto). La solución fue comparar los estilos del elemento procedente de la página web con el mismo elemento insertado en un vacío <iframe>. La lógica aquí es que no hay hojas de estilo en un vacío <iframe>, por lo que cada elemento de he anexado había solamente navegador predeterminado estilos. De esta manera fui capaz de deshacerse de la mayoría de las propiedades que fueron insignificantes.

    Problema 3 – sólo el mantenimiento de la taquigrafía propiedades

    Siguiente cosa que me ha llamado la atención fue que las propiedades de haber abreviatura equivalente eran innecesariamente impreso (por ejemplo, no fue border: solid black 1px y, a continuación,border-color: black;, border-width: 1px itd.).

    Para solucionar esto simplemente hemos creado una lista de propiedades que han de taquigrafía equivalentes y filtrado de los resultados.

    Problema 4 – quitar el prefijo propiedades

    El número de propiedades en cada regla fue significativamente menor después de la operación anterior, pero he encontrado que me umbral había un montón de -webkit- el prefijo propiedades que nunca he de escuchar (-webkit-app-region? -webkit-text-emphasis-position?).

    Me pregunto si debo seguir alguna de estas propiedades debido a que algunos de ellos parecía útil (-webkit-transform-origin, -webkit-perspective-origin etc.). No he descubierto la manera de comprobar esto, sin embargo, y dado que sabía que la mayoría de las veces, estas propiedades son solo basura, me he decidido a eliminar a todos ellos.

    Problema 5 – la combinación mismas reglas CSS

    El siguiente problema que me ha llamado la atención fue que las mismas reglas CSS que se repiten una y otra (por ejemplo, para cada <li> con la misma estilos no era la misma regla en la salida de CSS creado).

    Esto era sólo una cuestión de comparar las reglas de uno con el otro y con la combinación de estos que tenían exactamente el mismo conjunto de propiedades y valores. Como resultado, en lugar de #LI_1{...}, #LI_2{...} tengo #LI_1, #LI_2 {...}.

    Problema 6 – limpieza y fijación de la sangría de HTML

    Desde que yo era feliz con el resultado, me mudé a HTML. Parecía un desastre, sobre todo porque la outerHTML propiedad mantiene con formato exactamente como fue devuelto por el servidor.

    Lo único código HTML tomado de outerHTML necesitaba era un simple código de volver a formatear. Ya que es algo disponible en cada IDE, yo estaba seguro de que no es una biblioteca JavaScript que hace exactamente eso. Y resulta que Yo estaba a la derecha (jquery-clean). Lo que es más, tengo atributos innecesarios eliminación extra (style, data-ng-repeat etc.).

    Problema 7 – filtros de romper CSS

    Ya que hay una posibilidad de que en algunas circunstancias los filtros mencionados anteriormente, se pueden romper CSS en el fragmento de código, he hecho todos ellos opcionales. Usted puede desactivar desde el Configuración menú.

    • Estoy buscando una manera de hacerlo mediante programación dentro de una página (Para la impresión de un determinado subárbol DOM, sólo tienes que copiar a una nueva ventana y print()). Lo difícil sería (por usted o por alguien a buscar a la bifurcación de su repo) para hacer que esta en JS solo como se puede llamar a la función?
    • Enviarme un correo electrónico y podemos hablar de los detalles – creo que va a ser bastante simple.
    • muchas gracias por el esfuerzo, pero lo que si quiero conseguir el nodo de elemento con la función php ‘file_get_contents($url)», existe alguna solución, aquí está mi correo : stackoverflow.com/questions/21419857/…
    • La mayoría de los merecidos +500 he visto. Usted, señor, ganó el internet de los premios el día de hoy.
    • Gran trabajo! pero, ¿es posible incluir el código js que actúa sobre el elemento?
    • Y usted dice que fue inspirado por esta pregunta? Estás seguro de que fue la milla extra. Dicho esto, en realidad no trabajo para mí, y voy a decir que es por el bien de las personas con requerimientos similares. Lo que necesito es mantener la adaptación y cambio de tamaño de las cosas intactas, y como yo lo entiendo, una solución basada en getComputedStyle no puede hacer eso.
    • Para aquellos que no están contentos con los tamaños fijos (getComputedStyle), que tal vez debería echar un vistazo a esto : betterprogramming.com/htmlclipper.html
    • el hombre es eliminar todas las clases … necesito la reutilización de mi trabajo … todos los ID no es aceptada en todos los
    • Un +1 en la increíble plugin, seguro. Sin embargo, no funciona con CSS sprites, que es un poco de una decepción.
    • puede usted por favor informe que aquí: github.com/kdzwinel/SnappySnippet/issues ? Gracias!
    • alguien ya ha golpeado a mí: github.com/kdzwinel/SnappySnippet/issues/37.
    • Si podría tomar preguntas de los medios fue muy útil. Algunos Elementos del DOM tienen diferentes estilos en diferentes tamaños.
    • Hay alguna forma de copiar los asociados de Javascript o Jquery junto con css ?
    • no funciona en todos los
    • puedes dar más info? Lo que no funciona?
    • Podría copiar el correspondiente código de javascript se unen al elemento seleccionado?
    • tienes alguna sugerencia sobre cómo copiar javascript?

  2. 49

    Los navegadores Webkit (no estoy seguro acerca de FireBug) que permita copiar el código HTML de un elemento fácilmente, así que es una parte del proceso fuera del camino.

    Ejecución de este (en la consola de javascript) antes de copiar el código HTML de un elemento se moverá todos los calculada estilos para el elemento primario, así como todos los elementos secundarios, en el estilo en línea atributo que estarán disponibles 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);
    
    }

    Total del hack y usted tendrá un montón de «basura» atributos css para vadear, pero al menos debe obtener su comenzado.

    • Gran respuesta, pero…no guardan relación con la respuesta, lo que es con el para…loop sintaxis? Se lee como confuso para mí.
    • Esto es genial, sólo se pierde el elemento raíz. Añadir también el hecho de que el.setAttribute(«estilo», de la ventana.getComputedStyle(el).cssText);
    • en chrome consola .querySelector devuelve null para mí. Para cambiar a la siguiente y funcionó: var el = document.getElementById(«#someid»); el.setAttribute(«estilo», de la ventana.getComputedStyle(el).cssText); var els = el.getElementsByTagName(«*»); for(var i = -1, l = els.length; ++i < l;){ els[i].setAttribute(«estilo», de la ventana.getComputedStyle(els[i]).cssText); }
  3. 47

    Me pidió originalmente esta pregunta yo estaba buscando un Chrome (o FireFox), la solución, pero me topé con esta característica de Internet Explorer developer tools. Bastante parecido a lo que estoy buscando (excepto para el código javascript)

    Herramientas para copiar selectivamente HTML+CSS+JS de los sitios existentes

    Resultado:

    Herramientas para copiar selectivamente HTML+CSS+JS de los sitios existentes

    • IE11 también funciona. Pero la opción es accesible desde la derecha haga clic directamente sobre el elemento.
    • Wow, finalmente, un ejemplo de que la IE devtools son superiores!
    • La mejor solución que se me han tratado de comparar a todos los demás mencionados en esta página. Generar el CSS+HTML es super limpio, manteniendo original css nombres, lo que significa que el html es el mismo que el original.
    • Mierda que es impresionante. Puede confirmar @xoofx conclusiones que el lenguaje de marcado HTML sigue siendo el mismo, pero quería comentar, además, que también se genera un esqueleto padre envolver los elementos necesarios para que realmente coincida con el estilo.
    • Usa este. No podía conseguir snappy fragmento de código para que funcione correctamente (complejo html & css). No puedo creer que realmente funcionó. Y de la misma manera que la gente sabe, yo no ver esta característica en el borde justo explorer.
    • haga clic derecho en el elemento y un botón que dirá «elemento de copia con estilos» i.imgur.com/p5MeO3N.png

  4. 25

    Esto se puede hacer mediante el Plugin Firebug llamado álbum de recortes

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

    Herramientas para copiar selectivamente HTML+CSS+JS de los sitios existentes

    Edición:

    Este también puede ayudar a

    Firequark es una extensión de Firebug
    para ayudar en el proceso de HTML de la Pantalla
    Raspado. Firequark automáticamente
    extractos de selector css para una sola o
    html múltiples nodo(s) de una página web
    usando Firebug (un desarrollo web
    plugin para Firefox). El selector css
    generado puede ser dada como entrada
    html pantalla raspadores como Scrapi a
    extracto de la información. Firequark es
    construido para dar rienda suelta a la potencia de css
    selector para el uso de html de la pantalla
    raspado.

    • Álbum de recortes se ve genial – por desgracia, la versión más reciente (1.4.5) y una anterior se recomienda en los comentarios (1.4.3) no iba a funcionar para mí en OSX/FF3.6.1. Alguien tiene este trabajo?
    • me gustaría poder más precisamente, seleccione un nodo a guardar, pero esto funcionó bastante bien
    • Esto es un poco de ayuda, pero no soluciona mi necesidad de mover un elemento de la página con la necesaria css de una página a otra. Álbum de recortes copias de todas las páginas css, si es necesario o no para la parte seleccionada de la página, y no hace ningún reescritura de la css que ayude a evitar que los estilos de chocar con el css de la página de otro.
  5. 11

    divclip es una actualización
    la versión de Florentino Sardan del
    htmlclipper

    con mejoras modernas: ES5, HTML5, CSS con ámbito…

    mediante programación puede extraer una estilizada div con:

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

    Disfrutar.

    • el más grande! funciona como un encanto! hice algunas modificaciones, de modo que sólo puede funcionar en chrome. sólo hay que quitar la ‘exportación’ y ‘necesitan’ dependencia , y copiarlos a chrome fragmento de código. a continuación, puede en la consola, escriba copy(divclip.bySel('.topbar')) que copia la salida procesada en el portapapeles! 😉
    • tiene un error: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 no se pudo ejecutar ‘postMessage’ en ‘DOMWindow’: El objetivo origen de siempre (‘portal.office.com’) no coincide con el destinatario de la ventana de origen (‘null’).
  6. 9

    No hay plugins necesarios. Se puede hacer de forma muy sencilla con Internet Explorer 11 nativo de las Herramientas de desarrollo con un solo clic, muy limpio. Sólo derecho en un elemento y compruebe que el elemento y haga clic derecho en un bloque y seleccione «Copiar elemento con estilos». Se puede ver 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 Borde. Trató de htmlclipper y snappysnippet pero tuvo problemas con la retención de la capacidad de respuesta de los elementos con los que estoy tratando de copiar.
  7. 5

    Últimamente he creado una extensión de chrome «extracto Fragmento de» para copiar el elemento inspeccionado, html y sólo el css correspondiente y consultas de medios de comunicación de una página. Tenga en cuenta que esto le daría el real CSS correspondiente

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

    • Me gusta cómo esto mantiene a todos los selectores como en el original.
    • cómo se compara esto con snappy fragmento de extensión de chrome?
  8. 3

    Una herramienta con una única solución para que esto no me he enterado, pero se puede usar Firebug y Web Developer extension al mismo tiempo.

    Usar Firebug para copiar el código html sección necesita (Inspeccionar Elemento) y Desarrollador Web para ver que css se asocia con un elemento (la Llamada Web Developer «Ver Información de Estilo» – que funciona como Firebug del «Inspeccionar Elemento», pero en lugar de mostrar el código html que muestra el CSS asociado con marcado).

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

    Herramientas para copiar selectivamente HTML+CSS+JS de los sitios existentes

    • Esto es lo que yo hago, pero implica copia manual de la CSS para cada elemento. Lo que yo creo que el OP quiere que lo ideal es algo que puede copiar los estilos CSS que afectan a un elemento y todos los elementos anidados — copia de una vez como se hace con el HTML.
  9. 3

    http://clipboard.com lo hace y muy bien. Aunque su expectativa de que la versión copiada exactamente como en el original, para que pueda jugar y aprender con ella, puede no ser realista.

    • el sitio está abajo 🙁
  10. 3

    También necesito esta característica en Firebug! Hasta entonces, otro enfoque es el uso de este servicio en línea para eliminar clases y convertir el css para los estilos en línea.

  11. 2

    Sólo tienes que copiar la parte que desee de la página web y pegarlo en el editor wysiwyg. Compruebe el código fuente html haciendo clic en la «fuente» botón en la barra de herramientas del editor.

    He encontrado de esta manera más fácil y más cuando yo estaba trabajando en un sitio de Drupal. Puedo usar wysiwyg CKeditor.

  12. 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 se ve bastante prometedor, ya que evita las limitaciones de getComputedStyle. Estoy demasiado de un javascript noob para estar seguro de cómo lo utilizan para obtener el texto real de la css.
    • He cambiado el uso de el uso de jQuery en lugar de $, que me pone un poco de forma, pero ahora tengo SecurityError: The operation is insecure. Alguna sugerencia?
  13. 0

    Me he adaptado la top votado respuesta como un dragabble bookmarklet.

    Sólo hay que visitar esta página y arrastre el «Ejecutar Código jQuery» botón a tu barra de marcadores.

    • Da un error: Error: SyntaxError: sin cadena literal
    • que significa, usted debe hacer una copia de la respuesta y haces un fragmento de esa. no es la respuesta, pero te sugiero hacer un comentario en lugar de una respuesta
  14. 0

    Hay un plugin de firefox que guarda toda la página HTML, CSS, etc.. pero no he visto uno que hace un parcial de guardar.

    Recuerdo IE 5.5 tenía lo que buscaba, aunque 😉

    • Oops! No podemos encontrar la página.
  15. 0

    He ido a través de todas las herramientas mencionadas como respuesta aquí. Pero se repite, sucio HTML CSS con cara bonita que estaban mirando hacia arriba en. No te dan JS.

    Lo que yo hago:

    1. Primer filtro de anuncios que no se requieren en la página
    2. A continuación , guarde la página web junto con la vinculación de los recursos.
    3. Eliminar innecesarios HTML, CSS y JS
    4. mantener la desvinculación de los recursos uno a uno cuidadosamente.

Dejar respuesta

Please enter your comment!
Please enter your name here