it-swarm.com.ru

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

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

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

376
kenwarner

SnappySnippet

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

SnappySnippet Chrome extension

Другие преимущества

  • очищает 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 во фрагменте кода, я сделал их все необязательными. Вы можете отключить их в меню .

548
Konrad Dzwinel

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

49
Collective Cognition

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

Element Source with Style

Результат:

Element Source with Style result

46
kenwarner

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

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

29
Florentin

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

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

enter image description here

Edit:

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

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

24
Jitendra Vyas

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

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

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

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

Наслаждаться.

11
ato3787045

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

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

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

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

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

5
melwyn pawar

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

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

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

'View Style Information' result from Web Developer Extension

3
GmonC

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

3
Moin Zaman

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

3
Acyra

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

Я нашел этот самый простой способ, когда работал над сайтом Drupal. Я использую wysiwyg CKeditor.

2
Kevin Siji
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()

2
geekbytes0xff

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

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

0
ripper234

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

Что я делаю:

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

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

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

0
Chris Abrams