Outils pour copier sélectivement HTML + CSS + JS à partir de sites existants
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 tels que Firebug et Chrome Developer Tools facilitent l’inspection du code, mais si je veux copier une section isolée et la manipuler localement, il serait difficile de copier tous les éléments individuels et leur css associé Et probablement autant de travail pour sauvegarder la source entière et couper le code non lié.
Ce serait formidable si je pouvais cliquer avec le bouton droit de la souris sur un nœud dans Firebug et disposer de l'option "Enregistrer HTML + CSS pour ce nœud". Un tel outil existe-t-il? Est-il possible d'étendre Firebug ou Chrome Outils de développement pour ajouter cette fonctionnalité?
SnappySnippet
J'ai enfin trouvé du temps pour créer cet outil. Vous pouvez installer SnappySnippet à partir de Chrome Web Store. Il permet une extraction facile HTML + CSS du nœud DOM spécifié (dernier inspecté). 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 le CSS pour le rendre lisible
- entièrement configurable (tous les filtres peuvent être désactivés)
- fonctionne avec les pseudo-éléments
::beforeet::after - Nice UI grâce à Bootstrap & Flat-UI projets
Code
SnappySnippet est open source, et vous pouvez trouver le code sur GitHub .
La mise en oeuvre
Puisque j'ai beaucoup appris en faisant cela, j'ai décidé de partager certains des problèmes que j'ai rencontrés et de leurs 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 originales (provenant de fichiers CSS sur le site Web). Assez é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, et qui ne correspondaient plus dans le contexte d'un extrait de code HTML. L'analyse et la modification des sélecteurs ne semblant pas une bonne idée, j'ai abandonné cette tentative.
Deuxième tentative - getComputedStyle ()
Ensuite, je suis parti de quelque chose suggéré par @CollectiveCognition - getComputedStyle(). Cependant, je voulais vraiment séparer le HTML de 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 identifiants à tous les nœuds de la sous-arborescence sélectionnée et utilisé cet identifiant pour créer les règles CSS appropriées.
Problème 2 - Supprimer les propriétés avec les valeurs par défaut
L'attribution d'identifiants aux nœuds s'est bien déroulée, mais j'ai découvert que chacune de mes règles CSS possède ~ 300 propriétés, rendant le code 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 du navigateur (et chaque balise a des valeurs par défaut différentes). La solution consistait à comparer les styles de l'élément provenant du site Web avec le même élément inséré dans un <iframe> vide. La logique était qu'il n'y avait pas de feuilles de style dans un <iframe> vide, de sorte que chaque élément que j'ai ajouté ne comportait 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 - ne garder que les propriétés abrégées
La chose suivante que j’ai repérée est que des propriétés ayant un équivalent abrégé ont été imprimées inutilement (par exemple, il y avait border: solid black 1px et ensuite border-color: black;, border-width: 1px itd.).
Pour résoudre ce problème, j'ai simplement créé une liste de propriétés ayant des équivalents abrégés et les ai filtrées à partir des résultats.
Problème 4 - Suppression des propriétés préfixées
Le nombre de propriétés dans chaque règle était nettement inférieur après l'opération précédente, mais j'ai constaté que j'avais encore beaucoup de propriétés préfixées -webkit- dont je n'avais jamais entendu parler (-webkit-app-region? -webkit-text-emphasis-position?).
Je me demandais si je devrais conserver l’une quelconque de ces propriétés, car certaines d’entre elles semblaient utiles (-webkit-transform-Origin, -webkit-perspective-Origin etc.). Cependant, je n'ai pas trouvé comment vérifier cela et, comme je savais que la plupart du temps, ces propriétés n'étaient que des ordures, j'ai décidé de toutes les supprimer.
Problème 5 - Combiner les mêmes règles CSS
Le problème suivant que j’ai repéré est que les mêmes règles CSS sont répétées encore et encore (par exemple, pour chaque <li> avec exactement les mêmes styles, la même règle a été créée dans la sortie CSS).
Il s’agissait simplement de comparer des règles entre elles et de combiner celles qui avaient exactement le même ensemble de propriétés et de valeurs. En conséquence, au lieu de #LI_1{...}, #LI_2{...}, j’ai eu #LI_1, #LI_2 {...}.
Problème 6 - nettoyage et correction de l'indentation de HTML
Depuis que je suis content du résultat, je suis passé au HTML. Cela ressemblait à un gâchis, principalement parce que la propriété outerHTML le garde formaté exactement tel qu'il a été renvoyé par le serveur.
La seule chose dont le code HTML tiré de outerHTML était nécessaire était un simple reformatage du code. Comme c'est quelque chose de disponible dans chaque IDE, j'étais sûr qu'il y a une bibliothèque JavaScript qui fait exactement ça. Et il s’avère que j’avais raison (jquery-clean) . De plus, la suppression d’attributs inutiles est en sus (style, data-ng-repeat etc.).
Problème 7 - Filtres cassant CSS
Dans la mesure où il est possible que, dans certaines circonstances, les filtres mentionnés ci-dessus brisent le code CSS dans l'extrait de code, je les ai tous rendus facultatifs. Vous pouvez les désactiver dans le menu Paramètres .
Les navigateurs Webkit (vous ne savez pas très bien à propos de FireBug) vous permettent de copier facilement le code HTML d'un élément, ce qui en fait une partie du processus.
L'exécution de cette opération (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 intégré, 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.
À l'origine, je posais cette question. Je cherchais une solution Chrome (ou FireFox), mais je suis tombé par hasard sur cette fonctionnalité dans les outils de développement d'Internet Explorer. À peu près ce que je cherche (sauf pour le javascript)
Résultat:
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
Modifier:
This peut aussi aider
Firequark est une extension de Firebug qui facilite le processus de nettoyage d'écran HTML. Firequark extrait automatiquement le sélecteur css d'un ou de 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 utilisé comme entrée pour les grattoirs d'écran HTML tels que Scrapi afin d'extraire des informations. Firequark est conçu pour libérer la puissance du sélecteur css pour utiliser le grattage de l’écran HTML.
divclip est une version mise à jour de celle de Florentin Sardan htmlclipper
avec des améliorations modernes: ES5, HTML5, CSS ciblé ...
vous pouvez extraire par programmation une div stylisée avec:
var html = require("divclip").bySel(".article-body");
console.log(html);
Prendre plaisir.
Il n'y a pas de plugins nécessaires. 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 à droite sur un élément et inspectez cet élément, cliquez avec le bouton droit de la souris sur un bloc et choisissez "Copier l'élément avec les 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éé l'extension "[eXtract Snippet" chrome pour copier l'élément inspecté, le code HTML et uniquement les requêtes css et multimédia pertinentes d'une page. Notez que cela vous donnerait le CSS pertinent
https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=fr
Je ne suis pas au courant d'un outil avec une solution unique pour cela, mais vous pouvez utiliser Firebug et extension Web Developer en même temps.
Utilisez Firebug pour copier la section html dont vous avez besoin (Inspect Element) et Web Developer pour voir quel css est associé à un élément (Appel du développeur Web "Informations sur le style de la vue" - cela fonctionne comme "Inspecter" de Firebug, mais au lieu d'afficher le code 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.
http://clipboard.com le fait et très bien. Bien que vos attentes concernant la version copiée soient exactement comme dans l'original, vous pouvez jouer et apprendre avec, mais ce n'est peut-être pas réaliste.
J'ai aussi besoin de cette fonctionnalité sur Firebug! Jusque-là, une autre approche consiste à utiliser this service en ligne pour supprimer des classes et convertir les CSS en styles intégrés.
Copiez simplement la partie souhaitée 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é cela 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;
}
});
utilisation:
$("#login_wrapper").getStyles()
J'ai adapté le réponse la plus votée sous forme de bookmarklet à glisser.
Il suffit de visiter cette page et de faire glisser le bouton "Exécuter le code jQuery" dans la barre de favoris.
J'ai passé en revue tous les outils mentionnés comme réponse ici. Mais ils donnent des CSS répétés et sales avec un beau visage sur lequel vous étiez en train de regarder. Ils ne vous donnent pas JS.
Ce que je fais:
- Je filtre d'abord les annonces qui ne sont pas obligatoires sur la page.
- Enregistrez ensuite la page Web complète avec les ressources de liaison.
- Supprimer les fichiers HTML, CSS et JS inutiles
- dissociez soigneusement les ressources un par un.
Il existe un firefox plugin qui enregistre le code HTML, CSS, etc. de la page entière, mais je n’en ai pas vu qui effectue une sauvegarde partielle.
Je me souviens que IE 5.5 avait ce que vous cherchiez cependant;)