Экспорт CSS изменений из инспектора (webkit, firebug и т. Д.)

Question

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

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

Существует ли что-то подобное?

Answer 1

Я нашел ответ на этот вопрос, по крайней мере, в Chrome v14.

Находясь в разделе «Элементы», просто нажмите ссылку «filename: linenumber» рядом с правилами CSS.Файл CSS, который появляется, будет содержать все модификации.

Это место точно:

Answer 2

В Chrome вы можете щелкнуть правой кнопкой мыши файл CSS на вкладке «Источники» и выбрать «Локальные изменения»

. Здесь отображаются все ваши локальные изменения.Каждая ревизия имеет временную метку, и вы можете выполнить откат к любой предыдущей ревизии.

См. Раздел «Текущее редактирование и история ревизий » этого руководства.

Answer 3

Firediff - это дополнение к Firebug, которое отслеживает изменения , сделанные в Firebug.Он регистрирует все, что вы будете делать на панели HTML (отлично), но также и ваше краткое использование расширения панели инструментов веб-разработчика (не очень хорошо), например Shift-Ctrl-F, чтобы получить информацию о размере шрифта в пикселях.

Я видел расширение Firebug в Chrome, но не тестировал его, я использую Firediff с Firefox.

Answer 4

Я предлагал этот продукт на SO раньше (я не связан с ними каким-либо образом).

http://www.skybound.ca/

Отличный продукт.Похоже, именно то, что вы ищете, и многое другое.

РЕДАКТИРОВАТЬ: Несколько других ответов здесь упоминали способность Google Chrome ссылаться на ваши локальные файлы (что очень очень круто).Проверьте другие ответы!

Answer 5

Я создал расширение Chrome, которое делает именно это.

Оно называется StyleURL - оно принимает любые изменения CSS, сделанные вами в Chrome Inspector, и выводит действительный CSS в виде diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Вот пример, где я добавил «padding-bottom: 50px» на эту страницу:

Это открытый исходный код и на GitHub тоже: https://github.com/Jarred-Sumner/styleurl-extension

Answer 6

Как уже упоминалось в Cloudworks, ответ на это изменился.Теперь это может быть достаточно хорошо реализовано расширением Chrome DevTools Autosave .Этот инструмент отслеживает изменения CSS и JavaScript, сделанные в консоли Chrome Developer Tools, и сохраняет их обратно в локальные файлы.Инструкции по установке и настройке расширения см. В руководстве, написанном @ addyosmani в его блоге, здесь .

* 1011.* Есть также удобная заставка , которая довольно подробно описывает расширение.

Answer 7

Если вы редактируете внешний CSS, то вы можете перетащить его последнюю версию из панели «Ресурсы» в любой текстовый редактор, поддерживающий DnD (см. http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, в разделе «Сохраняющиеся изменения»).отменить изменения CSS в любой более ранней версии ресурса таблицы стилей (во всплывающем меню правой кнопки мыши любой версии таблицы стилей).

Answer 8

С Рабочими областями вы можете сохранить свой CSS при вводе в Инспекторе (в Chrome).Проблема в том, что каждое изменение автоматически сохраняется, и нет возможности отключить эту функцию, как указано в http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ и Отключить автоматическое сохранение изменений CSS в Chrome Developer Tools .

Answer 9

В Chrome в инспекторе css вы можете нажать и удерживать кнопку «+», а затем добавить изменения в таблицу стилей инспектора. Это не так удобно, как непосредственное редактирование в ваших css-селекторах, но то, что вы напишите, будет все в inspector-stylesheet.css

Answer 10

Добавить ответ специально для Safari - это возможно.

Когда вы редактируете CSS в разделе «Стили» в Инспекторе для существующего CSS-файла, вы можете нажать Cmd-S, чтобы заново сохранить весь файл с изменениями. Однако, если вы используете мета-язык, такой как Sass / препроцессор / генерируете свой CSS с помощью связывания и т. Д., Я не думаю, что это действительно решит эту проблему, хотя это может быть возможно с исходными картами CSS.

Когда вы редактируете CSS в верхней части раздела «Стили» под Style Attribute, чтобы добавить встроенные стили (не привязанные к существующему файлу CSS), кажется, что невозможно легко экспортировать все эти изменения. Сейчас я просто копирую и вставляю переопределения вручную для каждого элемента.

Официальные документы Apple немного устарели, но находятся здесь: Руководство для веб-инспектора - Редактирование кода для изменения веб-страницы .