просмотр измененных css на лету с помощью инструментов разработчика

559
user10089632

В инструменте разработчика вы можете изменять CSS на лету, и отображение меняется мгновенно.

Но если вы нажмете кнопку просмотра исходного кода, вы получите оригинальное CSS документа

Может быть замечательно иметь этот CSS по команде или надстройке.

1
Какой у Вас вопрос? DavidPostill 6 лет назад 0
@DavidPostill хорошо, мой вопрос был о способе извлечь этот CSS user10089632 6 лет назад 0

1 ответ на вопрос

1
DavidPostill

Как я могу просмотреть измененный CSS на лету, используя инструменты разработчика?

Fire Fox

Изменения, сделанные в представлении «Правила», отражаются в редакторе стилей и наоборот.

Исходные инструменты разработчика Firefox Изучите и отредактируйте CSS

Чтобы открыть редактор стилей, выберите «Редактор стилей» в меню «Веб-разработчик» (которое является подменю в меню «Инструменты» на Mac). Панель инструментов появится внизу окна браузера с активированным редактором стилей:

Редактор стилей

Source Firefox Developer Tools Редактор стилей


Хром

Сохраняющиеся изменения

  • После изменения правила внешней таблицы стилей соответствующий текст ресурса обновляется на панели «Ресурсы», и история изменений сохраняется для таких ресурсов таблицы стилей до тех пор, пока не будет закрыто окно DevTools.

  • Активируйте панель Ресурсы, найдите tutorial.css в дереве ресурсов. Обратите внимание, что узел дерева является расширяемым. Нажмите на стрелку рядом с заголовком узла, и вы увидите все изменения ресурсов, которые вы сделали выше.

  • Выберите любую ревизию, чтобы увидеть ее отличия от исходного ресурса таблицы стилей, выделенного по линиям.

  • Вы можете перетащить узел редакции таблицы стилей в большинство текстовых редакторов, чтобы экспортировать содержимое редакции.

Стили редактирования источника