433 votes

Outils pour copier sélectivement HTML + CSS + JS de sites existants

Comme la plupart des développeurs web, de temps en temps j'aime regarder à la source des sites web pour voir comment leur langage est construit. Des outils comme Firebug et Chrome Developer Tools de le rendre facile à inspecter le code, mais si je veux copier une section isolée et jouer avec localement, ce serait une douleur à la copie de tous les éléments individuels et leurs associés css. Et sans doute aussi beaucoup de travail à économiser de l'ensemble de la source et découper le code non lié.

Ce serait génial si je pouvais le bouton droit sur un nœud dans Firebug et un "Enregistrer en HTML+CSS pour ce nœud" option. Un tel outil existe pas? Est-il possible de prolonger Firebug ou Chrome Developer Tools pour ajouter cette fonctionnalité?

621voto

Konrad Dzwinel Points 10160

SnappySnippet

J'ai enfin trouvé du temps pour créer cet outil. Vous pouvez installer SnappySnippet à partir du Chrome Web Store. Il permet de faciliter le HTML+CSS extraction à partir spécifié (la dernière inspection) nœud DOM. En outre, vous pouvez envoyer votre code directement à CodePen ou jsFiddle. Profitez-en!

SnappySnippet Chrome extension

D'autres fonctionnalités

  • nettoie HTML (supprimant les attributs, la fixation de l'indentation)
  • optimise CSS pour le rendre lisible
  • entièrement configurable (tous les filtres peut être désactivé)
  • fonctionne avec :before et :after pseudo-éléments
  • belle INTERFACE utilisateur grâce à Bootstrap & Plat-UI projets

Code

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

La mise en œuvre

Depuis que j'ai appris beaucoup de choses tout en faisant ceci, j'ai décidé de partager quelques-uns des problèmes que j'ai vécu et mes solutions, peut-être que quelqu'un va trouver ça intéressant.

Première tentative - getMatchedCSSRules

Au début, j'ai essayé de récupérer origine des règles CSS (en venant de la CSS de fichiers sur le site web). Assez étonnamment, c'est très simple grâce à l' window.getMatchedCSSRules, cependant, il ne fonctionne pas bien. Le problème était que nous étions en ne prenant que la partie HTML et CSS sélecteurs qui ont été la mise en correspondance dans le contexte de l'ensemble du document, n'ont pas de contrepartie dans le cadre d'un fragment de code HTML. Depuis l'analyse et la modification de sélecteurs de ne pas sembler une bonne idée, j'ai renoncé à cette tentative.

Deuxième tentative - getComputedStyle

Ensuite, j'ai commencé à partir de quelque chose que @CollectiveCognition suggéré - getComputedStyle. Cependant, j'ai vraiment voulu se séparer CSS HTML du formulaire au lieu de l'in-lining tous les styles.

Problème 1 - séparer les CSS HTML

La solution ici n'était pas très belle, mais assez simple. J'ai assigné les Id de tous les nœuds dans le sous-arbre utilisé que l'ID d'établir des règles CSS. Cela fonctionné très bien cependant j'ai trouvé que chacun de mes règles CSS a ~300 propriétés entières CSS illisible.

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

S'avère qu' getComputedStyle de retours possible toutes les propriétés CSS et les valeurs calculées pour un élément donné. Certains d'entre eux où vide, certains avaient le navigateur par défaut et les valeurs. Pour supprimer les valeurs par défaut, j'ai dû les obtenir à partir de l'explorateur d'abord (et chaque balise a différentes valeurs par défaut). La solution était de comparer les styles d'élément provenant du site web avec le même élément inséré dans un vide iframe. La logique ici est que il n'y a pas de feuilles de style dans un vide iframe de sorte que chaque élément que j'ai ajouté il y avait seulement des styles par défaut du navigateur. De cette façon, j'ai été en mesure de se débarrasser de la plupart des propriétés qui ont été insignifiants. La prochaine chose que j'ai remarqué est que les propriétés ayant abréviation équivalente ont été inutilement imprimés (par exemple, il existait border: solid black 1px puis border-color: black;, border-width: 1px itd.).

Problème 3 - ne gardant que la sténographie de propriétés

Pour résoudre cela, j'ai simplement créé une liste de propriétés qui ont abréviation équivalents et filtrée à partir de résultats. Nombre de propriétés dans chaque règle a été significativement plus faible après cette opération, mais j'ai trouvé que j'seuil ont beaucoup d' -webkit- préfixé propriétés que je n'ai jamais entendre parler de (-webkit-app-region? -webkit-text-emphasis-position?).

Problème 4 - enlever le préfixe propriétés

Je me demandais si je ne devais en garder l'une de ces propriétés, car certains d'entre eux m'a semblé utile (-webkit-transform-origin, -webkit-perspective-origin etc.). Je n'ai pas compris comment faire pour vérifier ce que, et depuis que je savais que la plupart du temps, ces propriétés sont juste des ordures, j'ai décidé de les supprimer tous. Ensuite, problème que j'ai repéré est que même les règles CSS sont répétés à plusieurs reprises (par exemple, pour chaque <li>, avec exactement le même styles, il y avait la même règle dans le CSS de sortie créé).

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

C'était juste une question de comparaison règles les uns avec les autres et en combinant ces qui avait exactement le même ensemble de propriétés et de valeurs. En conséquence, au lieu de #LI_1{...}, #LI_2{...} j'ai #LI_1, #LI_2 {...}. Depuis que j'ai été heureux avec le résultat, j'ai déménagé à HTML. Il ressemblait à un gâchis, surtout parce qu' outerHTML de la propriété conserve formaté exactement comme il a été retourné par le serveur.

Problème 6 - nettoyage et fixation de l'indentation de code HTML

La seule chose que du code HTML prises à partir d' outherHTML besoin d'un code simple reformatage. Puisque c'est quelque chose de disponible dans tous les IDE j'étais sûr qu'il y est une bibliothèque JavaScript qui fait exactement cela, et il s'avère que j'avais raison (jquery-propre). Qui plus est, j'ai inutiles attributs de retrait supplémentaires (style, data-ng-repeat etc.).

Problème 7 - filtres de rupture CSS

Depuis il ya une chance que, dans certaines circonstances, les filtres mentionnés ci-dessus peuvent briser CSS dans l'extrait de code que j'ai fait tous facultatifs. Vous pouvez les désactiver à partir du menu paramètres.

57voto

qntmfred Points 10246

Initialement, j’ai 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. Assez bien ce que je cherche (à l’exception du javascript)

Element Source with Style

Résultat :

Element Source with Style result

53voto

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

L'exécution de ce (dans la console javascript) avant de copier le code HTML d'un élément à déplacer toutes les valeurs de styles pour le parent de l'élément de donnée, ainsi que tous les éléments enfants, dans la ligne de l'attribut style qui sera ensuite disponible dans le cadre de l'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 et vous aurez beaucoup de "junk" attributs css à parcourir, mais devrait au moins obtenir votre commencé.

32voto

Florentin Points 181

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

Vous êtes les bienvenus pour utiliser et améliorer.

26voto

Jitendra Vyas Points 28378

Cela peut être fait par Firebug Plugin appelé album

Vous pouvez le vérifier option Javascript dans la mise en

enter image description here

Edit:

Cela peut aussi aider à

Firequark est une extension Firebug pour faciliter le processus de HTML Écran Grattage. Firequark automatiquement extraits sélecteur css pour un seul ou plusieurs html nœud(s) à partir d'une page web à l'aide de Firebug (développement web plugin pour Firefox). Le sélecteur css généré peut être fournie en entrée à html écran grattoirs comme Scrapi à extraire de l'information. Firequark est construit à exploiter la puissance de css sélecteur pour l'utilisation de html écran grattage.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X