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é?
Réponses:
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
::before
et::after
pseudo-élémentsCode
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 1px
et puisborder-color: black;
,border-width: 1px
itd.).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-origin
etc.). 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
outerHTML
proprié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-repeat
etc.).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 .
la source
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?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:
la source
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 .
C'est un hack total et vous aurez beaucoup d'attributs CSS "indésirables" à parcourir, mais vous devriez au moins commencer.
la source
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.
la source
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
la source
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:
Prendre plaisir.
la source
copy(divclip.bySel('.topbar'))
qui copiera la sortie traitée dans le presse-papiers! ;)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
la source
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
la source
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.
la source
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.
la source
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.
la source
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.
la source
la source
jQuery
place de$
, ce qui m'amène un peu, mais maintenant je reçois desSecurityError: The operation is insecure.
pointeurs?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.
la source
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;)
la source
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:
la source