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

exécuter ceci (dans la console javascript) avant de copier le HTML pour 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 style inline qui sera alors disponible en tant que partie du 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 total hack et vous aurez beaucoup d'attributs CSS "junk" à parcourir, mais devrait au moins commencer.

j'ai posé cette question à l'origine, je cherchais une solution Chrome (ou FireFox), mais je suis tombé sur cette fonctionnalité dans Internet Explorer developer tools. À peu près ce que je cherche (sauf 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 pouvez l'utiliser et l'améliorer.

cela peut être fait par le Plugin Firebug appelé scrapbook

vous pouvez vérifier l'option Javascript dans le paramètre

Edit:

Ce peut aussi aider à

Firequark est une extension de Firebugg pour faciliter le processus de L'écran HTML Raclage. Firequark automatiquement extrait le sélecteur css pour un plusieurs html nœud(s) à partir d'une page web L'utilisation de Firebug (un développement web plugin pour Firefox). Le sélecteur css généré peut être fournie en entrée à scrapers d'écran html comme Scrapi à extraire de l'information. Firequark est construit pour libérer la puissance de css sélecteur pour l'utilisation de html écran raclage.

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

moderne, avec des améliorations: ES5, HTML5, CSS délimités...

vous pouvez extraire programmatiquement une div stylisée avec:

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

de Profiter de.

il n'y a pas besoin de plugins. Cela peut être fait très simplement avec Internet Explorer 11 native Developer Tools en un seul clic, très propre. Juste sur un élément et d'inspecter l'élément et cliquez-droit sur certains 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;
}

récemment, j'ai créé une extension chrome "extrait Snippet" pour copier l'élément inspecté, html et seulement les questions CSS et médias pertinents à 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 ce que je ne connais pas, mais vous pouvez utiliser Firebug et Web Developer extension en même temps.

utilisez Firebug pour copier la section html dont vous avez besoin (inspecter L'élément) et le développeur Web pour voir quel css est associé à un élément (appelant le développeur Web "Afficher les informations de Style" - cela fonctionne comme "inspecter L'élément" de Firebug, mais au lieu d'afficher le balisage html il montre le CSS associé avec 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 fait ceci et assez bien. Bien que votre attente de la version copiée étant exactement comme dans l'original de sorte que vous pouvez jouer et apprendre avec elle, peut ne pas être réaliste.

j'ai aussi besoin de cette fonctionnalité sur Firebug! D'ici là, une autre approche consiste à utiliser ce "service en ligne 151920920" pour supprimer les classes et convertir les css en styles inline.

il suffit de copier la partie que vous voulez à partir de la page Web et de la coller dans l'éditeur wysiwyg. Vérifiez la source html en cliquant sur le bouton "source" dans la barre d'outils de l'éditeur.

j'ai trouvé cela plus facile quand 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 top réponse votée comme un bookmarklet de dragabble.

il suffit de visiter cette page et de glisser le bouton" Run jQuery Code " dans votre barre de signet.

il y a un plugin firefox qui sauve le HTML de la page entière, CSS, etc.. mais je n'ai pas vu un seul qui n'partielle enregistrer.

je me souviens IE 5.5 a ce que vous recherchez ;)

j'ai traversé tous les outils mentionnés comme réponse ici. Mais ils donnent répété, sale HTML CSS avec beau visage que vous regardiez vers le haut sur. Ils ne te donnent pas de JS.

Ce que je fais:

1. D'abord je filtre des annonces qui ne sont pas obligatoires sur la page
2. ensuite , sauvegardez la page web complète avec les ressources de lien.
3. Supprimer HTML, CSS et JS inutiles
4. continue de déverrouiller ressources un par un avec soin.