Сохранить css из браузера

Совсем недавно нашёл расширение, которое поможет оптимизировать труд веб-разработчика и сократить время на правки css стилей.

Тех, кто верстает сайты, наверное, не раз посещало желание сохранить стили css и их значения через панель разработчика (вызывается клавишей F12) в браузере, в которой они, собственно, и подгонялись.

Если вы тот, кого посещала такая мысль, или тот, к кому она не приходила, но вас заинтересовал подобный инструмент, то читайте дальше.

Чаще всего разработчики пользуются браузером Firefox. Если на вашем компьютере не установлен такой браузер, то рекомендую им обзавестись, так как расширение, о котором пойдёт речь, взаимодействует именно с ним.

Скачать последнюю версию Firefox с официального сайта

После установки браузера необходимо интегрировать в него дополнительный плагин Firebug. Он заменит стандартную консоль разработчика (F12).

Установить последнюю версию плагина Firebug с официального сайта

Для того, чтобы он установился в браузер, достаточно кликнуть по кнопке «Добавить в Firefox».

А теперь непосредственно расширение, которое и будет сохранять стили из браузера в файл css.

Оно устанавливается в два этапа:

Первый этап

Добавляем в браузер, а точнее в Firebug, кнопку, при нажатии на которую будут сохраняться правки из браузера в файл стилей. Данный плагин называется cssUpdater и устанавливается также кликом по кнопке «Добавить в Firefox».

Установить последнюю версию плагина cssUpdater с официального сайта

После его установки в панели Firebug’а появится кнопка «Sync now», она показана на картинке ниже.

Сохранить css из браузера

Второй этап

Устанавливаем программное обеспечение на компьютер. Сама программа имеет аналогичное название с плагином cssUpdater.

Скачать последнюю версию программы cssUpdater с официального сайта

Данная программа доступна для бесплатного скачивания, но только после небольшой регистрации. Зайдя на сайт и чуть-чуть пролистав страницу вниз, вы увидите форму регистрации. После правильного заполнения всех имеющихся полей и клика по кнопке Submit вас перенаправят на страницу, где будет ссылка зелёного цвета с текстом «install page», кликаем по ней!

На вновь открывшейся странице в разделе «Download» в тексте будет ссылка «here», кликаем… После скачивания устанавливаем программу на ПК и запускаем…

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

Скачать последнюю версию AdobeAir с официального сайта

В появившемся окне вводите ключ, который можно взять, пройдя по ссылке «member page», находящейся под «Download» в разделе «Installation / Configuration».

На этом установка закончена.

Теперь, чтобы всё заработало, нужно просто перетащить нужный css файл в нижнюю часть окна программы cssUpdater или выбрать файл, нажав на кнопку «Add local files».

Сохранить css стили из браузера

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

Во время редактирования файла через Firebug не забывайте нажимать на кнопку «Sync now» для сохранения изменений. А также после того, как закончите работу по редактированию css свойств, не забудьте перейти в текстовый редактор и подтвердить изменения в файле сторонней программой.

Ну вот и всё!!!

Берегите время!

Если статья оказалась полезной, расскажите о ней в социальных сетях

Комментарии  

+1 #5 Анастасия Шер 01.12.2015 21:14 МСК
Цитирую Alejandro del Tano:
По FTP нихрена не работает. Такое впечатление, что разработчики забросили поддержку проекта. нормально работает только на локальном компьютере.

У меня работает по ftp ))))) уииииии )))
Может вы неправильно прописали путь?

Хочу отметить что если путь прописывать до файла например
/templates/demo/css/template.css - то файл действительно не встает в редактируемый список

В надписи на верху написано "каталог" т.е и если внести путь так
/templates/demo/css/ то там высвечиваются доступные файлы - кликая по ним - файл заносится в список редактируемых)))))
Цитировать
0 #4 sagamorr 22.09.2015 14:05 МСК
Хорошая статья, оч помогло!
Цитировать
0 #3 Alejandro del Tano 03.09.2015 08:10 МСК
По FTP нихрена не работает. Такое впечатление, что разработчики забросили поддержку проекта. нормально работает только на локальном компьютере.
Цитировать
+1 #2 Павел 18.02.2015 23:56 МСК
Вася, я не сталкивался с такими проблемами. Может он у вас коряво встал?
Цитировать
+1 #1 Вася 18.02.2015 21:17 МСК
он глючит, не всегда и не все стили может сохранить
Цитировать

Добавить комментарий

Залогиниться через свой аккаунт в социальной сети


Защитный код Обновить