Инструменты для выборочного копирования HTML+CSS+JS с существующих сайтов [закрыто]

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

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

16 ответов


SnappySnippet

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

SnappySnippet Chrome extension

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

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

код

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

реализация

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

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

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

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

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

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

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

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

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

Проблема 3-сохранение только стенографических свойств

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

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

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

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

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

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

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

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

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


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

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

Element Source with Style

результат:

Element Source with Style result


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

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


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

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

enter image description here

изменить:

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

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


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

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

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

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

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


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

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

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

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

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


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

используйте Firebug для копирования раздела html, который вам нужен (Inspect Element), и веб - разработчика, чтобы увидеть, какой css связан с элементом (вызов веб-разработчика "View Style Information" - он работает как Firebug "Inspect Element", но вместо показа разметки html он показывает связанный CSS с этой разметкой).

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

'View Style Information' result from Web Developer Extension


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. держите unlinking ресурсы по-одному тщательно.