Как и большинству веб-разработчиков, мне иногда нравится смотреть на исходные сайты, чтобы увидеть, как строится их разметка. Такие инструменты, как Firebug и Chrome Developer Tools, упрощают проверку кода, но если я захочу скопировать отдельный раздел и поэкспериментировать с ним локально, было бы непросто скопировать все отдельные элементы и связанные с ними CSS. И, вероятно, столько же работы, чтобы сохранить весь исходный код и вырезать несвязанный код.

Было бы здорово, если бы я мог щелкнуть правой кнопкой мыши узел в Firebug и выбрать опцию «Сохранить HTML + CSS для этого узла». Существует ли такой инструмент? Можно ли расширить Firebug или Chrome Developer Tools, чтобы добавить эту функцию?

SnappySnippet

Я наконец нашел время для создания этого инструмента. Вы можете установить SnappySnippet из Github. Это позволяет легко извлекать HTML + CSS из указанного (последнего проверенного) узла DOM. Кроме того, вы можете отправить свой код прямо в CodePen или JSFiddle. Наслаждайтесь!

Другие особенности

• очищает HTML (удаляет ненужные атрибуты, исправляет отступы)
• оптимизирует CSS, чтобы сделать его читабельным
• полностью настраивается (все фильтры можно отключить)
• работы с ::beforeи ::afterпсевдо-элементы
• хороший интерфейс благодаря проектам Bootstrap & Flat-UI

Код

SnappySnippet с открытым исходным кодом, и вы можете найти код на GitHub .

Реализация

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

Первая попытка - getMatchedCSSRules ()

Сначала я попытался восстановить исходные правила CSS (из файлов CSS на веб-сайте). Удивительно, но это очень просто благодаря window.getMatchedCSSRules(), однако, это не сработало. Проблема заключалась в том, что мы брали только часть селекторов HTML и CSS, которые совпадали в контексте всего документа, которые больше не совпадали в контексте фрагмента HTML. Поскольку синтаксический анализ и изменение селекторов не казались хорошей идеей, я отказался от этой попытки.

Вторая попытка - getComputedStyle ()

Затем я начал с того, что предложил @CollectiveCognition - getComputedStyle(). Тем не менее, я действительно хотел отделить CSS-форму от HTML, а не вставлять все стили.

Проблема 1 - отделение CSS от HTML

Решение здесь было не очень красивым, но довольно простым. Я назначил идентификаторы всем узлам в выбранном поддереве и использовал этот идентификатор для создания соответствующих правил CSS.

Проблема 2 - удаление свойств со значениями по умолчанию

Присвоение идентификаторов узлам работало хорошо, однако я обнаружил, что каждое из моих правил CSS имеет ~ 300 свойств, делающих весь CSS нечитаемым.
Получается, что getComputedStyle()возвращает все возможные CSS-свойства и значения, рассчитанные для данного элемента. Некоторые из них были пустыми, некоторые имели значения по умолчанию для браузера. Чтобы удалить значения по умолчанию, мне пришлось сначала получить их из браузера (и у каждого тега есть разные значения по умолчанию). Решением было сравнить стили элемента, поступающего с веб-сайта, с тем же элементом, вставленным в пустую строку <iframe>. Логика заключалась в том, что в пустой таблице нет таблиц стилей <iframe>, поэтому каждый добавленный элемент имел только стили браузера по умолчанию. Таким образом, я смог избавиться от большинства свойств, которые были незначительными.

Задача 3 - сохранение только сокращенных свойств

Следующее, что я заметил, было то, что свойства, имеющие сокращенный эквивалент, были излишне распечатаны (например, было border: solid black 1pxи то border-color: black;, border-width: 1pxитд.).
Чтобы решить эту проблему, я просто создал список свойств, которые имеют сокращенные эквиваленты, и отфильтровал их по результатам.

Проблема 4 - удаление префиксных свойств

Число свойств в каждом правиле было значительно ниже после предыдущей операции, но я обнаружил , что у меня подоконник было много -webkit-приставочных свойства , которые я не слышал от ( -webkit-app-region? -webkit-text-emphasis-position?).
Мне было интересно, стоит ли мне сохранять какое-либо из этих свойств, потому что некоторые из них кажутся полезными ( -webkit-transform-originи -webkit-perspective-originт. Д.). Однако я не выяснил, как это проверить, и, поскольку я знал, что большую часть времени эти свойства являются просто мусором, я решил удалить их все.

Проблема 5 - объединение тех же правил CSS

Следующая проблема, которую я обнаружил, заключалась в том, что одни и те же правила CSS повторяются снова и снова (например, для каждого <li>с одинаковыми стилями в создаваемом выводе CSS было одно и то же правило).
Это был просто вопрос сравнения правил друг с другом и объединения их, которые имели точно такой же набор свойств и значений. В итоге вместо #LI_1{...}, #LI_2{...}меня попал #LI_1, #LI_2 {...}.

Проблема 6 - очистка и исправление отступа HTML

Поскольку я был доволен результатом, я перешел на HTML. Это выглядело как беспорядок, главным образом потому, что outerHTMLсвойство сохраняет его в том формате, в котором оно было возвращено с сервера.
Единственное, что HTML-код был взят из outerHTMLнеобходимого, - это простое переформатирование кода. Поскольку это доступно в каждой IDE, я был уверен, что есть библиотека JavaScript, которая делает именно это. И получается, что я был прав (jquery-clean) . Более того, у меня есть дополнительные ненужные атрибуты ( styleи data-ng-repeatт. Д.).

Проблема 7 - фильтры, нарушающие CSS

Поскольку существует вероятность того, что в некоторых случаях упомянутые выше фильтры могут нарушить CSS во фрагменте кода, я сделал их все необязательными. Вы можете отключить их из меню настроек .

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

Результат:

Браузеры 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, чтобы пройти через них, но, по крайней мере, вы должны начать.

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

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

Это можно сделать с помощью плагина Firebug, который называется запиской.

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

Редактировать:

Это также может помочь

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

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

с современными улучшениями: ES5, HTML5, 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-раздела (Inspect Element) и веб-разработчика, чтобы увидеть, какой CSS-код связан с элементом (Вызов веб-разработчика «Просмотр информации о стиле» - он работает как Firebug «Inspect Element», но вместо отображения html). разметка показывает связанный CSS с этой разметкой).

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

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

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

Просто скопируйте нужную часть с веб-страницы и вставьте ее в редактор 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()

Я адаптировал ответ с наибольшим количеством голосов в виде букмарклета.

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

Eсть плагин Firefox который сохраняет HTML, CSS и т. Д. Всей страницы, но я не видел ни одного, который выполняет частичное сохранение.

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

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

Что я делаю:

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