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é?

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!

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 .

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)

Résultat:

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.

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.

Cela peut être fait par Firebug Plugin appelé scrapbook

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

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

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.

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

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

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.

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.

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.

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.

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

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.

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

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.