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


403

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

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


4
Просто хотел добавить (не инструмент, как вы описываете, поэтому не отвечая), если вы используете Chrome, вы можете выбрать элемент и посмотреть на «Computed Style» справа в разделе CSS. Вы сможете скопировать и вставить весь список в стиль. Это дополнительный шаг от инструмента, который вы хотите, но дает вам CSS, который вы ищете.
riv_rec

1
Не полный ответ на ваш вопрос, но F2 в инструментах разработчика Chrome на вкладке «Элементы» откроет выбранный элемент DOM и поддерево для встроенного редактирования (и копирования, если хотите).
10

Одним из очень интересных расширений Chrome является «Сохранить все ресурсы». Установите его, а затем перейдите к «Экономия ресурсов» на вкладке Chrome Dev Tool и загрузите его!
Димерос

Ответы:


580

SnappySnippet

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

Расширение SnappySnippet Chrome

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

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


@KonradDzwinel, я ищу способ сделать это программно на странице (для печати определенного поддерева DOM просто скопируйте его в новое окно и print()). Насколько сложно (для вас или для кого-то, кто хочет раскошелиться на репо) сделать это в одной только JS как вызываемой функции?
Hashbrown

@Hashbrown Напишите мне, и мы сможем поговорить о деталях - я думаю, это будет довольно просто.
Конрад Дзвинел

@KonradDzwinel большое спасибо за усилия, но что, если я хочу получить элемент узла с функцией php 'file_get_contents ($ url)', есть какое-то решение, вот мой пост: stackoverflow.com/questions/21419857/ …
Яссин Эдуири

Отличная работа! но возможно ли включить код js, который действует на элемент?
t31321

1
@KonradDzwinel кто-то уже избил меня до этого: github.com/kdzwinel/SnappySnippet/issues/37 .
Дэвид Кивини

52

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

Источник Элемента со Стилем

Результат:

Источник элемента с результатом стиля


5
IE11 тоже работает. Но опция доступна при щелчке правой кнопкой мыши непосредственно на элементе.
Родольфо Хорхе Немер Ногейра

15
Вау, наконец, пример, где IE devtools превосходят!
14:30

7
Лучшее решение, которое я пробовал сравнить со всеми другими, перечисленными на этой странице. Сгенерированный CSS + HTML является супер чистым при сохранении оригинальных имен CSS, что означает, что HTML такой же, как и оригинал.
xoofx

Святое дерьмо, это круто. Может подтвердить выводы @xoofx о том, что разметка HTML остается прежней, но хотел бы прокомментировать далее, что она также выводит скелетные родительские элементы переноса, необходимые для истинного соответствия стилю.
Даниэль Соколовский

Использовал это. Не удалось получить корректный фрагмент кода (сложный html и css). Я не могу поверить, что это действительно сработало. И просто, чтобы люди знали, я не видел эту функцию в краю просто исследователь.
Ватсон

51

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


3
Отличный ответ, но ... не связанный с реальным ответом, что с синтаксисом цикла for ...? Это читается как запутанное для меня.
Стив Кэмпбелл

1
Это здорово, просто не хватает корневого элемента. Добавьте это тоже: el.setAttribute ("style", window.getComputedStyle (el) .cssText);
Карман Кертес

в консоли chrome .querySelector вернул для меня ноль. Поэтому измените его на следующее, и это сработало: var el = document.getElementById ("# someid"); el.setAttribute ("style", window.getComputedStyle (el) .cssText); var els = el.getElementsByTagName ("*"); for (var i = -1, l = els.length; ++ i <l;) {els [i] .setAttribute ("style", window.getComputedStyle (els [i]). cssText); }
Виктор Танго

30

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

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


Это именно то, что мне нужно прямо сейчас. Большое спасибо ... думаю, что это решение доступно 4 года назад ...
fro_oo

25

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

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

введите описание изображения здесь

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

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

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


Scrapbook выглядит великолепно - к сожалению, последняя версия (1.4.5) и предыдущая, рекомендованная в обзорах (1.4.3), не работают для меня на OSX / FF3.6.1. У кого-нибудь это работает?
метеоролог

Я хотел бы более точно выбрать узел для сохранения, но это сработало довольно хорошо
kenwarner

1
Это довольно полезно, но не решило мою потребность в перемещении элемента страницы с необходимым CSS на другую страницу. Scrapbook копирует все страницы CSS, независимо от того, нужна ли она для выбранной части страницы, и не выполняет переписывания CSS, что поможет избежать столкновения стилей с CSS другой страницы.
mc0e

13

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

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

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

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

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


Великий! работает как шарм! Я сделал некоторые изменения, чтобы он мог работать только в Chrome. просто удалите зависимости 'export' и 'require' и скопируйте их в фрагмент chrome. затем можете в консоли набрать, copy(divclip.bySel('.topbar'))что скопирует обработанный вывод в буфер обмена! ;)
кен

произошла ошибка: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 Не удалось выполнить 'postMessage' в 'DOMWindow': указан целевой источник ( portal.office.com ) не соответствует происхождению окна получателя ('null').
Слава

10

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

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

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

Вау, это отлично работало в Microsoft Edge. Пробовал htmlclipper и snappysnippet, но были проблемы с сохранением отзывчивости элементов, которые я пытаюсь скопировать.
Мэтт

это удивительно, работает отлично.
snit80

5

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

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


Мне нравится, как это сохраняет все селекторы, как в оригинале.
хаджами

1
как это соотносится с расширением snappy snippet chrome?
Патоши パ ト シ

3

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

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

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

Результат просмотра информации о стиле из расширения для веб-разработчиков


Это то, что я делаю, но это включает в себя ручное копирование CSS для каждого элемента. Я думаю, что в идеале OP хочет копировать стили CSS, влияющие на элемент и все вложенные элементы, - копируя его за один раз, как вы делаете это для HTML.
13

3

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


3

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


2

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

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


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


Для меня это выглядит довольно многообещающе, поскольку позволяет избежать ограничений getComputedStyle. Я просто слишком большой поклонник javascript, чтобы быть уверенным, как использовать его, чтобы получить реальный текст CSS.
mc0e

Я изменил использование, чтобы использовать jQueryвместо $, что немного меня заводит, но теперь я получаю SecurityError: The operation is insecure. какие-либо указатели?
mc0e

0

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

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


1
Выдает ошибку: Ошибка: SyntaxError: неопределенный строковый литерал
Барни

@ Барни: он имеет в виду, вы должны скопировать ответ там и сделать фрагмент из этого. это не ответ, но я предлагаю сделать его комментарием вместо ответа
Мо Град А

0

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

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


К сожалению! Мы не можем найти эту страницу.
Хамза Зафер

0

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

Что я делаю:

  1. Сначала я фильтрую объявления, которые не требуются на странице
  2. Затем сохраните полную веб-страницу вместе со ссылками на ресурсы.
  3. Удалите ненужные HTML, CSS и JS
  4. Тщательно продолжайте связывать ресурсы один за другим.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.