Полное редактирование таблиц стилей на лету в Chrome или Safari - PullRequest
5 голосов
/ 24 января 2011

Я ненавижу Firefox, правда, но, как веб-разработчик, я прикован к нему б / у из надежного набора инструментов, которые предлагает Firebug. В последнее время инструменты проверки Chrome и Safari позволяли пользователям редактировать структурный код полных блоков (очень ошибочно), но вы все еще не можете редактировать полные таблицы стилей. Обычно, когда кто-то говорит об этом, разработчики Chrome и Safari говорят «НО ВЫ МОЖЕТЕ РЕДАКТИРОВАТЬ CSS», и это в какой-то степени верно. Вы можете редактировать свойство CSS по свойствам (что занимает много времени, если у вас много изменений) в обоих браузерах, но нет способа просмотреть полную вычисленную таблицу стилей, внести в нее изменения и сразу же увидеть результаты. На сегодняшний день только полная установка Firebug на Firefox позволяет вам сделать это.

Был ли какой-либо импульс в лагерях Chrome или Safari для создания плагина, соответствующего этой беспрецедентной функции? Дешевые плагины, которые позволяют вставлять CSS на страницу, не являются ответом. Это действительно просто:

  1. Иметь список с текущими таблицами стилей, на которые ссылаются
  2. Выберите тот, который вы хотите редактировать, и нажмите кнопку редактирования
  3. См. Весь код в таблице стилей
  4. Внесите изменения и сразу увидите их отражение на странице

Неужели так сложно построить что-то, что делает это? Я думаю, что это должно быть, потому что иначе сообщества разработчиков двух браузеров полностью игнорировали бы это? Если есть что-то, что предлагает такую ​​возможность, я бы хотел услышать это; в противном случае, возможно, кто-то подойдет к планшету и разработает его для Chrome или Safari. Кажется, что ребята, которые разработали приложение CSS Edit, были бы во всем этом.

Ответы [ 3 ]

9 голосов
/ 25 января 2011

Благодаря вам я нашел его!

Расширение Live Stylesheets для Chrome - это то, что вы ищете.Обязательно перезапустите Chrome после установки, чтобы использовать его.

3 голосов
/ 29 декабря 2011

Вы также можете редактировать внешние таблицы стилей в Chrome DevTools (начиная с Chrome 15 или около того).Просто дважды щелкните содержимое таблицы стилей на панели «Ресурсы» (или нажмите кнопку «Изменить» ниже), отредактируйте, Ctrl-S, чтобы зафиксировать новую ревизию, нажмите Esc, чтобы отменить редактирование.И он обновляет вашу страницу при вводе!

0 голосов
/ 16 февраля 2018

Вы можете редактировать свои CSS-файлы непосредственно в Chrome, не полагаясь ни на какое расширение.

Вот как: Редактируйте файлы CSS на лету с помощью Chrome DevTools

Другой способ получить к нему доступ:

  1. щелкните правой кнопкой мыши на странице, выберите "осмотреть"
  2. в DevTools, нажмите «Источники»
  3. найдите CSS на панели «Сеть» и щелкните по нему
  4. изменить CSS и сохранить его (нажав Ctrl + S) enter image description here
...