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

105

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

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

Есть ли что-то подобное?

на крючке
источник
Нетрудно написать для этого расширение Safari / Chrome. Используйте контекстное меню, чтобы позволить пользователю щелкнуть элемент правой кнопкой мыши, затем захватить свойство currentStyle объекта, возможно, отправить в буфер обмена?
tbeseda
Может, мне стоило пойти поискать, прежде чем комментировать здесь. Возможный дубликат stackoverflow.com/questions/162644/…
MiffTheFox 01
Ах хорошо. Я хотел бы увидеть несколько ответов для chrome / web-kit, но там есть отличные ответы. Спасибо @MiffTheFox
hookedonwinter
Проверьте Backfire: blog.quplo.com/2010/08/… Не пробовал, но звучит многообещающе.
Брайан Даунинг,
1
@BryanDowning Готово! Это супер круто. Спасибо за пинг.
hookedonwinter

Ответы:

78

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

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

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

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Николай Зографос
источник
4
обратите внимание, что это также работает для новых селекторов CSS, которые добавляются в Инспектор с помощью +значка
Джонатан Дэй,
1
Это будет работать только для изменений, которые были добавлены в таблицу стилей инспектора. Это не сработает для изменений, внесенных в наборы правил для существующих селекторов классов.
ian.pvd
49

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

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

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

Крис Макдональд
источник
1
Похоже, вы можете откатиться только до последней ссылки. Таким образом, вы потеряете изменения, если случайно обновите / закроете вкладку и т. Д.
tomblah
Как это работает с современными сборщиками, такими как webpack, где весь ваш CSS объединен в один файл?
mattgabor 05
Я не вижу этого "Локальные изменения", этот ответ устарел?
Люк Пигетти
@LukePighetti Я вижу это в версии 79 (12/2019), если я открою интересующий меня исходный файл> щелкните правой кнопкой мыши> локальные модификации. Это открывает вкладку в «ящике консоли» под названием «Изменения», в которой есть левое меню со всеми моими измененными файлами. Вы также можете перейти к нему, нажав на многоточие в меню> дополнительные инструменты> изменения.
xr280xr
11

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

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

ФелипеАльс
источник
Классный плагин. Определенно приближает меня к тому, чего я хочу. Собираюсь подождать и посмотреть, не появится ли что-нибудь получше (например, полное копирование отформатированного CSS в буфер обмена).
hookedonwinter
7

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

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

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

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

Джарред Самнер
источник
Очень удобный инструмент!
DanTheMann
2
Все неработающие ссылки принимают github. Пожалуйста, обновите, звучит многообещающе
Мирослав
Этот проект сейчас заброшен. Обидно :-(
Дэймон Хилл
7

В Chrome также есть вкладка « Изменения » в ящике консоли, на которой отображаются все модификации CSS. Это не экспорт, но, по крайней мере, очень удобно быстро понять, что изменилось.

Скриншот вкладки "Изменения" в инструментах разработчика Chrome

Адриан Б.
источник
1
Этот ответ предоставляет встроенное решение браузера для просмотра изменений без необходимости установки дополнительных расширений. Он отслеживает изменения, внесенные в любую таблицу стилей (или JS) в виде подробного сравнения с отдельными файлами, и показывает построчное добавление, удаление и изменение отдельных символов. Хотя экспорта нет, на сегодняшний день это лучшее решение, чем текущий лучший ответ 2011 года.
ian.pvd
После 9 лет в этих ответах много шума, но это, пожалуй, лучший ответ. Единственное, чего не хватает, - это быстрого способа экспортировать разницу, чтобы вы могли автоматически обрабатывать изменения в скрипте или IDE, вместо того, чтобы выполнять параллельную работу и вручную настраивать таблицу стилей.
Сами Фуад
5

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

http://www.skybound.ca/

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

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

Брайан Даунинг
источник
Выглядит довольно круто. Жаль, что это 80 долларов. Спасибо @Bryan, хорошая находка
hookedonwinter
2
Ответ здесь изменился за последние несколько лет. Chrome DevTools теперь позволяет записывать изменения обратно в файл . Волнующие времена!
cloudworks
4

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

Александр Павлов
источник
4

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

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

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

Эндрю Крэсуэлл
источник
2

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

Джорджио Темпеста
источник
2

И Firefox, и Chrome теперь поддерживают эту функцию, но стоит отметить, что на некоторых платформах, если не все Chrome не отображает ее по умолчанию, вам необходимо включить представление «Изменения», чтобы увидеть это (в моем Kubuntu Linux 20.04 этого не было по умолчанию), вот как вы можете включить его: перейдите к кнопке «Настройка и управление DevTools» на панели инструментов разработчика> «Дополнительные инструменты»> «Изменения» , после чего у кнопки появится вкладка:

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

В Firefox нет необходимости включать его, но если вы пришли из мира Chrom *, его может быть сложно найти. Просто проверьте последний раздел справа на вкладке «Инспектор»:

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

Мариано Руис
источник
Спасибо - в моем нынешнем Chrome 2020 этого не было!
Адам Хьюз
0

Если вы используете стандартные инструменты разработчика Firefox, вы можете редактировать CSS прямо в диалоговом окне инструментов - нажмите кнопку области просмотра CSS (это кнопка вверху с {}символом) и отредактируйте CSS напрямую. Он будет обновляться в браузере в реальном времени, и когда вы закончите, просто скопируйте и вставьте его прямо в свой файл css. Ницца!

Авраам Брукс
источник
0

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

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

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

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

Тейлор Эдмистон
источник
0

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

Фрейзер Киркман
источник
-1

Мой продукт LIVEditor, который скоро будет в бета- версии, делает именно это.

Чтобы вам было проще понять это, вы можете подумать, что инспектор Firebug встроен в ваш текстовый редактор.

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

Эдвин Ип
источник
8
Звучит здорово. Жаль, что это для Windows.
KPM
Как правило, ссылки на инструмент или библиотеку должны сопровождаться примечаниями по использованию, конкретным объяснением того, как связанный ресурс применим к проблеме, или некоторым образцом кода , или, если возможно, всем вышеперечисленным.
Сэмюэл Лью