Можете ли вы добавить новые свойства CSS в Chrome Inspector?

Question

Можно ли добавить новые свойства CSS в инспекторе Chrome?Кажется, что вы можете редактировать только существующие свойства.

Кроме того, как только вы редактируете свойства, есть ли способ просмотреть пересмотренный CSS в целом?

Answer 1

Да, можно добавить новые свойства CSS в Инспекторе Chrome и просмотреть их в несколько простых шагов:

1. Щелкните правой кнопкой мыши элемент, который вы хотите изменить, и выберите «Проверить элемент»;
2. Нажмите кнопку «Новое правило стиля» ( 1 на изображении ниже );
3. Google Chrome назначит правило соответствия CSS, которое можно переименовать (2 на изображении ниже );
4. Добавьте свои правила CSS ( 2 на рисунке ниже );
5. Когда вы закончите, просто отметьте «Вычислено»Панель "Стиль" ( 3 на изображении ниже ).

Answer 2

Вы можете добавить новое свойство в правило, дважды щелкнув внутри правила.Также вы можете добавить новое правило с колеса в углу и затем выбрать «Новое правило стиля».

Чтобы просмотреть весь пересмотренный документ, перейдите по ссылке: Resources > Frame > site name > Stylesheets > stylesheet-name.css

Или просто нажмите кнопку+ символ над свойствами css

Answer 3

Можно ли добавить новые свойства CSS в инспекторе Chrome? Это кажется, что вы можете редактировать только существующие свойства ...

Просто дважды щелкните в любом белом и пустом месте на панели «Стили».

Я обычно дважды щелкаю справа от }, чтобы выбрать любое правило CSS, которое я хочу отредактировать.

Кроме того, как только вы отредактируете свойства, есть ли способ просмотреть исправленный CSS в целом?

См. @ Ответ Сотириса .

Не то, что я знаю.

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

Answer 4

Почему бы и нет? Вот скриншот панели Styles инспектора Google Chrome

Обратите внимание на блок:

element.style {

}

Вы просто щелкаете мышью в этой области, и инспектор даст вам возможность добавлять новые стили. Если вам нужно добавить новый атрибут к элементу, щелкните его правой кнопкой мыши на панели Elements и выберите «Добавить атрибут».

Кроме того, как только вы отредактируете свойства, есть ли способ просмотреть пересмотренный CSS в целом?

Разве Computed Style панель не дает вам эту информацию? Там вы можете проверить все стили, примененные к узлу, и, собственно, в каком правиле и из какой таблицы стилей они применяются.