Как можно нормально смотреть стили элемента в браузере, если в них примеси переменных?

Приветствую.
А я все чаще замечаю в стилях сайтов появление переменных:
61a4610b12471984765660.png
Их свойства невозможно нормально посмотреть в браузере или я не пойму «технику» их просмотра. Можно открыть скомпилированные стили:
61a461d42a24a707772001.png Но это дополнительные движения, что не есть хорошо.
Есть какие-то способы, настройки, расширения для нормального отображения стилей — вот без этих всех переменных?
  • Вопрос задан
  • 413 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Flying
Вам нужно определиться для чего именно вы хотите просматривать стили элемента.

Если вы хотите видеть какие стили определены (т.е. из каких стилевых таблиц какой стиль приходит, как задан и т.п.) - то это вкладка Styles, она отображает данные из исходных стилевых таблиц.

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

Судя по всему вы хотите какое-то промежуточное представление (вычисленное, но не совсем), но с точки зрения браузера такого состояния просто нет. Если же генерировать какое-то промежуточное представление - то, уверен, там начнётся масса веселья в случае редактирования.

За Chrome не скажу, а в Firefox значение переменной показывается при hover'е, в целом удобно.

Если вы считаете что такая функциональность необходима - вам стоит оформить запрос в виде bug report'а, благо bug tracker'ы для движков основных браузеров открыты (Chromium, Firefox, WebKit). Однако при описании подобного запроса вам стоит постараться лучше продумать предлагаемый вами сценарий реализации.
Ответ написан
profesor08
@profesor08 Куратор тега CSS
В девтулзах, в стилях отображается конкретно то, что прописано в .css файле или в теге <style>. Это, в первую очередь, важно для разработчиков сайта, чтоб понимать что будет на выходе. Во вторых, так как разработчики используют некую тему, то они не заморачиваются над кодами цветов, они просто используют --btn-color, не заморачиваясь над тем, какой там цвет кода. И браузер всеми силами, в меру своих возможностей, помогает им, предоставляя доступ к отладочной информации.

Ты же, будучи посторонним и непричастным к разработке сайта, не имеешь доступа к исходникам и всей отладочной информации. Более того, тебе этого и не надо. И разработчикам это тоже не надо. А это значит, что придется пользовать тем, что есть:
  • наводишь на переменную и смотришь ее значение
  • кликаешь на переменную и переходишь к ее объявлению


Если же такой расклад не устраивает, то есть еще варианты:
  • Связаться с разработчиками сайта и попросить их убрать css переменные и заменить их на коды цветов. Скорее всего будешь послан xD в том или ином виде, если вообще ответят.
  • Написать свое расширение для девтулзов, которое поставить финальные значения на место переменных.
  • Если написать не в силах, то заплати кому-то за разработку.
  • Если денег на себя жалко, то попроси кого-то написать такое расширение, авось повезет.
  • Еще можно попытаться упросить разработчиков браузера, но это не просто. Но если получится, то через пару лет xD добавится галочка.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы