Outils pour copier sélectivement HTML + CSS + JS à partir de sites existants [fermé]

403

Comme la plupart des développeurs Web, j'aime parfois regarder la source des sites Web pour voir comment leur balisage est construit. Des outils comme Firebug et Chrome Developer Tools facilitent l'inspection du code, mais si je veux copier une section isolée et jouer avec elle localement, il serait difficile de copier tous les éléments individuels et leurs CSS associés. Et probablement autant de travail pour enregistrer la source entière et supprimer le code non lié.

Ce serait formidable si je pouvais cliquer avec le bouton droit sur un nœud dans Firebug et avoir une option "Enregistrer HTML + CSS pour ce nœud". Un tel outil existe-t-il? Est-il possible d'étendre Firebug ou Chrome Developer Tools pour ajouter cette fonctionnalité?

Kenwarner
la source
4
Je voulais juste ajouter (pas un outil comme vous le décrivez, donc pas de réponse), si vous utilisez Chrome, vous pouvez sélectionner un élément et regarder le "Style calculé" à droite dans la section css. Vous seriez en mesure de copier-coller la liste entière dans un style. C'est une étape supplémentaire à partir d'un outil que vous voulez, mais vous donne le CSS que vous recherchez.
riv_rec
1
Pas une réponse complète à votre question, mais les outils de développement F2 dans Chrome sur l'onglet "Éléments" ouvriront l'élément et la sous-arborescence DOM choisis pour l'édition en ligne (et la copie si vous le souhaitez).
10gistic
Une extension très intéressante de Chrome est le "Save All Resources". Installez-le, puis accédez à "Économiseur de ressources" de l'onglet Chrome Dev Tool et téléchargez-le!
dimeros

Réponses:

580

SnappySnippet

J'ai enfin trouvé le temps de créer cet outil. Vous pouvez installer SnappySnippet à partir de Github. Il permet une extraction HTML + CSS facile à partir du nœud DOM spécifié (dernière inspection). De plus, vous pouvez envoyer votre code directement à CodePen ou JSFiddle. Prendre plaisir!

Extension Chrome SnappySnippet

Autres caractéristiques

  • nettoie le HTML (suppression des attributs inutiles, correction de l'indentation)
  • optimise CSS pour le rendre lisible
  • entièrement configurable (tous les filtres peuvent être désactivés)
  • fonctionne avec ::beforeet ::afterpseudo-éléments
  • belle interface utilisateur grâce aux projets Bootstrap et Flat-UI

Code

SnappySnippet est open source, et vous pouvez trouver le code sur GitHub .

la mise en oeuvre

Comme j'ai beaucoup appris en faisant cela, j'ai décidé de partager certains des problèmes que j'ai rencontrés et mes solutions, peut-être que quelqu'un le trouvera intéressant.

Première tentative - getMatchedCSSRules ()

Au début, j'ai essayé de récupérer les règles CSS d'origine (provenant de fichiers CSS sur le site Web). Étonnamment, c'est très simple grâce à window.getMatchedCSSRules(), cependant, cela n'a pas bien fonctionné. Le problème était que nous ne prenions qu'une partie des sélecteurs HTML et CSS qui correspondaient dans le contexte de l'ensemble du document, qui ne correspondaient plus dans le contexte d'un extrait HTML. Étant donné que l'analyse et la modification des sélecteurs ne semblaient pas être une bonne idée, j'ai abandonné cette tentative.

Deuxième tentative - getComputedStyle ()

Ensuite, je suis parti de quelque chose que @CollectiveCognition a suggéré - getComputedStyle(). Cependant, je voulais vraiment séparer le HTML du formulaire CSS au lieu d'inclure tous les styles.

Problème 1 - séparer CSS de HTML

La solution ici n'était pas très belle mais assez simple. J'ai attribué des ID à tous les nœuds de la sous-arborescence sélectionnée et utilisé cet ID pour créer des règles CSS appropriées.

Problème 2 - suppression de propriétés avec des valeurs par défaut

L'affectation d'ID aux nœuds a bien fonctionné, mais j'ai découvert que chacune de mes règles CSS a environ 300 propriétés, ce qui rend l'ensemble CSS illisible.
Il s'avère que getComputedStyle()renvoie toutes les propriétés CSS possibles et les valeurs calculées pour l'élément donné. Certains d'entre eux étaient vides, d'autres avaient des valeurs par défaut du navigateur. Pour supprimer les valeurs par défaut, je devais d'abord les obtenir à partir du navigateur (et chaque balise a des valeurs par défaut différentes). La solution était de comparer les styles de l'élément provenant du site Web avec le même élément inséré dans un espace vide <iframe>. La logique ici était qu'il n'y avait pas de feuilles de style dans un espace vide <iframe>, donc chaque élément auquel j'ai ajouté n'y avait que des styles de navigateur par défaut. De cette façon, j'ai pu me débarrasser de la plupart des propriétés insignifiantes.

Problème 3 - conserver uniquement les propriétés sténographiques

La prochaine chose que j'ai repérée est que les propriétés ayant un équivalent raccourci ont été inutilement imprimées (par exemple, il y avait border: solid black 1pxet puis border-color: black;, border-width: 1pxitd.).
Pour résoudre ce problème, j'ai simplement créé une liste de propriétés qui ont des équivalents sténographiques et les ai filtrées des résultats.

Problème 4 - suppression des propriétés préfixées

Le nombre de propriétés dans chaque règle a été significativement plus faible après l'opération précédente, mais je l' ai trouvé que je SILL eu beaucoup de -webkit-propriétés préfixées que je n'ai jamais entendu parler de ( -webkit-app-region? -webkit-text-emphasis-position?).
Je me demandais si je devais conserver ces propriétés car certaines d'entre elles semblaient utiles ( -webkit-transform-origin, -webkit-perspective-originetc.). Je n'ai pas encore compris comment vérifier cela, et comme je savais que la plupart du temps ces propriétés ne sont que des ordures, j'ai décidé de les supprimer toutes.

Problème 5 - combinaison des mêmes règles CSS

Le problème suivant que j'ai repéré était que les mêmes règles CSS sont répétées encore et encore (par exemple, pour chacune <li>avec exactement les mêmes styles, il y avait la même règle dans la sortie CSS créée).
Il s'agissait simplement de comparer les règles entre elles et de combiner celles-ci qui avaient exactement le même ensemble de propriétés et de valeurs. En conséquence, au lieu de #LI_1{...}, #LI_2{...}je suis arrivé #LI_1, #LI_2 {...}.

Problème 6 - Nettoyage et correction de l'indentation du HTML

Comme j'étais satisfait du résultat, je suis passé au HTML. Cela ressemblait à un gâchis, principalement parce que la outerHTMLpropriété le maintient formaté exactement tel qu'il a été renvoyé par le serveur.
La seule chose dont le code HTML pris outerHTMLétait nécessaire était un simple reformatage du code. Étant donné que c'est quelque chose de disponible dans chaque IDE, j'étais sûr qu'il existe une bibliothèque JavaScript qui fait exactement cela. Et il s'avère que j'avais raison (jquery-clean) . De plus, j'ai des suppressions inutiles supplémentaires ( style, data-ng-repeatetc.).

Problème 7 - Filtres brisant CSS

Comme il est possible que dans certains cas, les filtres mentionnés ci-dessus puissent briser CSS dans l'extrait de code, je les ai tous rendus facultatifs. Vous pouvez les désactiver à partir du menu Paramètres .

Konrad Dzwinel
la source
@KonradDzwinel, je cherche un moyen de le faire par programme dans une page (pour imprimer un sous-arbre DOM spécifique, copiez-le simplement dans une nouvelle fenêtre et print()). À quel point serait-il difficile (pour vous ou pour quelqu'un de chercher à bifurquer votre dépôt) de faire cela dans JS seul comme une fonction appelable?
Hashbrown
@Hashbrown Envoyez-moi un mail et nous pourrons discuter des détails - je pense que ce sera assez simple.
Konrad Dzwinel
@KonradDzwinel merci beaucoup pour l'effort, mais si je veux obtenir l'élément de noeud avec la fonction php 'file_get_contents ($ url)', y a-t-il une solution, voici mon message: stackoverflow.com/questions/21419857/ …
Yassine edouiri
Bon travail! mais est-il possible d'inclure le code js qui agit sur l'élément?
t31321
1
@KonradDzwinel, quelqu'un m'a déjà battu: github.com/kdzwinel/SnappySnippet/issues/37 .
David Keaveny
52

J'ai initialement posé cette question, je cherchais une solution Chrome (ou FireFox), mais je suis tombé sur cette fonctionnalité dans les outils de développement Internet Explorer. À peu près ce que je recherche (sauf le javascript)

Source d'élément avec style

Résultat:

Source d'élément avec résultat Style

Kenwarner
la source
5
IE11 fonctionne également. Mais l'option est accessible par clic droit directement sur l'élément.
Rodolfo Jorge Nemer Nogueira
15
Wow, enfin un exemple où les devtools IE sont supérieurs!
dmnd
7
Meilleure solution que j'ai essayé de comparer à toutes les autres répertoriées dans cette page. Le CSS + HTML généré est super propre tout en conservant les noms css d'origine, ce qui signifie que le html est le même que l'original.
xoofx
Merde, c'est génial. Peut confirmer les constatations de @xoofx selon lesquelles le balisage HTML reste le même, mais il a souhaité ajouter qu'il produisait également les éléments d'encapsulation parent squelette nécessaires pour vraiment correspondre au style.
Daniel Sokolowski
Utilisé ceci. Impossible de faire fonctionner l'extrait snappy correctement (html et css complexes). Je ne peux pas croire que cela ait vraiment fonctionné. Et juste pour que les gens sachent, je n'ai pas vu cette fonctionnalité dans edge just explorer.
Watson
51

Les navigateurs Webkit (pas sûr de FireBug) vous permettent de copier facilement le code HTML d'un élément, c'est donc une partie du processus à l'écart.

L'exécution de ceci (dans la console javascript) avant de copier le code HTML d'un élément déplacera tous les styles calculés pour l'élément parent donné, ainsi que tous les éléments enfants, dans l'attribut de style en ligne qui sera ensuite disponible dans le cadre du code 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);

}

C'est un hack total et vous aurez beaucoup d'attributs CSS "indésirables" à parcourir, mais vous devriez au moins commencer.

Cognition collective
la source
3
Excellente réponse, mais ... sans rapport avec la réponse réelle, quelle est la syntaxe de la boucle for ...? Il se lit comme obscurci pour moi.
Steve Campbell
1
C'est super, il manque juste l'élément racine. Ajoutez également ceci: el.setAttribute ("style", window.getComputedStyle (el) .cssText);
Karman Kertesz
dans la console chrome, .querySelector a renvoyé null pour moi. Modifiez-le comme suit et cela a fonctionné: var el = document.getElementById ("# someid"); el.setAttribute ("style", window.getComputedStyle (el) .cssText); var els = el.getElementsByTagName ("*"); for (var i = -1, l = els.length; ++ i <l;) {els [i] .setAttribute ("style", window.getComputedStyle (els [i]). cssText); }
Viktor Tango
30

J'ai créé cet outil il y a des années dans le même but:
http://www.betterprogramming.com/htmlclipper.html

Vous êtes invités à l'utiliser et à l'améliorer.

Florentin
la source
C'est exactement ce dont j'ai besoin en ce moment. Merci beaucoup ... en pensant à cette solution disponible il y a 4 ans ...
fro_oo
25

Cela peut être fait par Firebug Plugin appelé scrapbook

Vous pouvez vérifier l'option Javascript dans le réglage

entrez la description de l'image ici

Éditer:

Cela peut également aider

Firequark est une extension de Firebug pour faciliter le processus de scraping d'écran HTML. Firequark extrait automatiquement le sélecteur css pour un ou plusieurs nœuds html d'une page Web à l'aide de Firebug (un plugin de développement Web pour Firefox). Le sélecteur css généré peut être fourni en entrée aux grattoirs d'écran html comme Scrapi pour extraire des informations. Firequark est conçu pour libérer la puissance du sélecteur css pour l'utilisation du grattage d'écran html.

Jitendra Vyas
la source
Scrapbook a fière allure - malheureusement, la dernière version (1.4.5) et une précédente recommandée dans les critiques (1.4.3) ne fonctionneraient pas pour moi sur OSX / FF3.6.1. Quelqu'un at-il ce travail?
peteorpeter
J'aimerais pouvoir sélectionner plus précisément un noeud à enregistrer, mais cela a plutôt bien fonctionné
Kenwarner
1
C'est un peu utile, mais cela n'a pas résolu mon besoin de déplacer un élément de page avec le CSS requis vers une autre page. Scrapbook copie toutes les pages css, que ce soit nécessaire ou non pour la partie sélectionnée de la page, et il ne fait aucune réécriture des css qui permettrait d'éviter que les styles n'entrent en collision avec les css d'une autre page.
mc0e
13

divclip est une version mise à jour du htmlclipper de Florentin Sardan

avec des améliorations modernes: ES5, HTML5, CSS de portée ...

vous pouvez extraire par programme une div stylisée avec:

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

Prendre plaisir.

ato3787045
la source
Elle est bonne! fonctionne comme un charme! j'ai fait quelques modifications pour qu'il puisse simplement fonctionner en chrome. supprimez simplement les dépendances "export" et "require", et copiez-les dans l'extrait de chrome. puis pouvez dans la console, tapez copy(divclip.bySel('.topbar'))qui copiera la sortie traitée dans le presse-papiers! ;)
ken
ont une erreur: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 Échec d'exécution de «postMessage» sur «DOMWindow»: l'origine cible fournie (« portal.office.com» ) ne ne correspond pas à l'origine de la fenêtre du destinataire ('null').
Slava
10

Aucun plugin n'est nécessaire. Cela peut être fait très simplement avec les outils de développement natifs d'Internet Explorer 11 en un seul clic, très propre. Juste sur un élément et inspectez cet élément, faites un clic droit sur un bloc et choisissez "Copier l'élément avec des styles". Vous pouvez le voir dans l'image ci-dessous.

Il fournit le code CSS très propre, comme

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}
GarryOne
la source
Wow, cela a parfaitement fonctionné dans Microsoft Edge. J'ai essayé htmlclipper et snappysnippet mais j'ai eu des problèmes pour conserver la réactivité des éléments que j'essaie de copier.
Matt
c'est incroyable, fonctionne parfaitement bien.
snit80
5

Dernièrement, j'ai créé une extension Chrome "eXtract Snippet" pour copier l'élément inspecté, le HTML et uniquement les requêtes CSS et multimédias pertinentes à partir d'une page. Notez que cela vous donnerait le CSS pertinent réel

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

melwyn pawar
la source
J'aime la façon dont cela conserve tous les sélecteurs comme dans l'original.
hajamie
1
comment cela se compare-t-il à l'extension snappy snippet chrome?
Patoshi パ ト シ
3

Un outil avec une solution unique pour cela que je ne connais pas, mais vous pouvez utiliser l' extension Firebug et Web Developer en même temps.

Utilisez Firebug pour copier la section html dont vous avez besoin (Inspecter l'élément) et Web Developer pour voir quel CSS est associé à un élément (Appeler Web Developer "View Style Information" - cela fonctionne comme "Inspect Element" de Firebug, mais au lieu d'afficher le html balisage, il montre le CSS associé à ce balisage).

Ce n'est pas exactement ce que vous voulez (un clic pour tout), mais c'est assez proche et au moins intuitif.

Résultat «Afficher les informations sur le style» de Web Developer Extension

GmonC
la source
C'est ce que je fais, mais cela implique de copier manuellement le CSS pour chaque élément. Ce que je pense que l'OP veut idéalement, c'est quelque chose qui puisse copier les styles CSS affectant un élément et tous les éléments imbriqués - le copier en une seule fois comme vous le faites pour le HTML.
Muhd
3

J'ai également besoin de cette fonctionnalité sur Firebug! Jusque-là, une autre approche consiste à utiliser ce service en ligne pour supprimer des classes et convertir les CSS en styles en ligne.

Acyra
la source
3

http://clipboardjs.com fait cela et très bien. Bien que votre attente que la version copiée soit exactement comme dans l'original afin que vous puissiez jouer et apprendre avec elle, peut ne pas être réaliste.

Moin Zaman
la source
2

Copiez simplement la partie que vous souhaitez à partir de la page Web et collez-la dans l'éditeur wysiwyg. Vérifiez la source html en cliquant sur le bouton "source" de la barre d'outils de l'éditeur.

J'ai trouvé cette façon la plus simple lorsque je travaillais sur un site Drupal. J'utilise wysiwyg CKeditor.

Kevin Siji
la source
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;
}
});

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

geekbytes0xff
la source
Pour mon besoin, cela semble assez prometteur, car il évite les limitations de getComputedStyle. Je suis juste trop d'un noob javascript pour être sûr de savoir comment l'utiliser pour obtenir le texte réel du CSS.
mc0e
J'ai changé l'utilisation pour utiliser à la jQueryplace de $, ce qui m'amène un peu, mais maintenant je reçois des SecurityError: The operation is insecure. pointeurs?
mc0e
0

J'ai adapté la réponse la plus votée comme un bookmarklet dragabble.

Il vous suffit de visiter cette page et de faire glisser le bouton "Exécuter le code jQuery" vers votre barre de favoris.

ripper234
la source
1
Donne une erreur: Erreur: SyntaxError: chaîne de caractères non terminée
Barney
@Barney: il veut dire que vous devriez y copier la réponse et en faire un extrait. ce n'est pas la réponse, mais je suggère d'en faire un commentaire au lieu d'une réponse
Mo Hrad A
0

Il existe un plugin Firefox qui enregistre le HTML, CSS, etc. de la page entière mais je n'en ai pas vu qui effectue une sauvegarde partielle.

Je me souviens cependant qu'IE 5.5 avait ce que vous cherchiez;)

Chris Abrams
la source
Oops! Nous ne pouvons pas trouver cette page.
Hamza Zafeer
0

J'ai parcouru tous les outils mentionnés comme réponse ici. Mais ils donnent des CSS HTML sales et répétés avec un beau visage que vous regardiez. Ils ne vous donnent pas JS.

Ce que je fais:

  1. Je filtre d'abord les annonces qui ne sont pas nécessaires sur la page
  2. Ensuite, enregistrez la page Web complète avec les ressources de liaison.
  3. Supprimez les fichiers HTML, CSS et JS inutiles
  4. dissociez soigneusement les ressources une par une.
Amit Kumar Gupta
la source