браузеры Webkit (не уверены в FireBug) позволяют легко копировать HTML элемента, так что это одна часть процесса в сторону.

запуск этого (в консоли javascript) перед копированием HTML для элемента переместит все вычисленные стили для данного родительского элемента, а также все дочерние элементы во встроенный атрибут стиля, который затем будет доступен как часть 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);

}

Это полный Хак, и вы будете иметь много "мусорные" атрибуты css, чтобы пробраться, но должны, по крайней мере, начать работу.

Я изначально задал этот вопрос, я искал решение Chrome (или FireFox), но я наткнулся на эту функцию в инструментах разработчика Internet Explorer. В значительной степени то, что я ищу (за исключением javascript)

результат:

Я создал этот инструмент несколько лет назад с той же целью:
http://www.betterprogramming.com/htmlclipper.html

вы можете использовать и улучшать его.

Это можно сделать с помощью плагина Firebug под названием альбом

вы можете проверить опцию Javascript в настройках

Edit:

этой также может помочь

Firequark является расширением Firebug чтобы помочь процессу HTML-экрана Выскабливание. Firequark автоматически извлекает селектор css для одного или несколько узлов html с веб-страницы использование Firebug (веб-разработка плагин для Firefox). CSS-селекторы сгенерированный могут быть использованы скребки экрана html как Скрапи к извлекать информацию. Firequark-это построенный, чтобы развязать силу css селектор для использования html экрана выскабливание.

divclip обновленная версия Флорентина Сардана htmlclipper

С современными улучшениями: ES5, HTML5, scoped CSS...

вы можете программно извлечь стилизованный div с помощью:

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

наслаждайтесь.

плагины не нужны. Это можно сделать очень просто с помощью собственных инструментов разработчика Internet Explorer 11 всего одним щелчком мыши, очень чистым. Просто прямо на элементе и проверьте этот элемент, а затем щелкните правой кнопкой мыши на каком-нибудь блоке и выберите "Копировать элемент со стилями". Вы можете увидеть на рисунке ниже.

Он предоставляет код CSS очень чистый, как

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

недавно я создал расширение chrome "eXtract Snippet" для копирования проверяемого элемента, html и только соответствующих css и медиа-запросов со страницы. Обратите внимание, что это даст вам фактический соответствующий CSS

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

инструмент с одним решением для этого я не знаю, но вы можете использовать Firebug и расширение для веб-разработчиков в то же время.

использовать Firebug, чтобы скопировать html-раздел, который вам нужен (инспектировать элемент) и веб-разработчика, чтобы увидеть, что CSS-это связанное с элементом (вызов веб-разработчик "представления информации" - он работает как Firebug в "Проинспектировать элемент", но вместо того, чтобы показывать HTML-разметка показывает, связанные с УСБ, что разметки).

Это не ровно что вы хотите (один клик для всего), но это довольно близко, и по крайней мере интуитивно.

http://clipboard.com делает это и довольно хорошо. Хотя ваше ожидание скопированной версии точно так же, как в оригинале, чтобы вы могли играть и учиться с ней, может быть нереалистичным.

Мне также нужна эта функция на Firebug! До тех пор, другой подход заключается в использовании этой онлайн-сервис для удаления классов и преобразования css в встроенные стили.

просто скопируйте нужную часть с веб-страницы и вставьте ее в Редактор wysiwyg. Проверьте источник html, нажав на кнопку "источник" на панели инструментов редактора.

Я нашел это самый простой способ, когда я работал на сайте Drupal. Я использую 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;
}
});

использование:$("#login_wrapper").getStyles()

я адаптировала топ-проголосовали ответ как букмарклет dragabble.

просто посетите на этой странице и перетащите кнопку" Run jQuery Code " на панель закладок.

есть плагин firefox сохраняет всю страницу в HTML, CSS и т. д.. но я не видел ни одного, который делает частичное спасение.

Я помню IE 5.5 было то, что вы искали, хотя;)

Я прошел через все инструменты, упомянутые в качестве ответа здесь. Но они дают повторяющиеся, грязные HTML CSS с красивым лицом, на которое вы смотрели. Они не дают вам JS.

Что я делаю:

1. сначала я фильтрую объявления, которые не требуются на странице
2. затем сохраните полную веб-страницу вместе со связыванием ресурсов.
3. удалите ненужные HTML, CSS и JS
4. продолжайте осторожно отсоединять ресурсы один за другим.