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

Question

[weranda]

Приветствую.
А я все чаще замечаю в стилях сайтов появление переменных:

Их свойства невозможно нормально посмотреть в браузере или я не пойму «технику» их просмотра. Можно открыть скомпилированные стили:
Но это дополнительные движения, что не есть хорошо.
Есть какие-то способы, настройки, расширения для нормального отображения стилей — вот без этих всех переменных?

Comments

[Антон Литвиненко]

если ткнуть в переменную будет переход на определение переменной. тоже телодвижение

[weranda]

Антон Литвиненко, Если ткнуть в переменную на вкладке styles, то ничего не произойдет.

[Антон Литвиненко]

weranda, ну а у меня не только переходит на определение но и всплывает значение

[weranda]

Антон Литвиненко, ну, тогда принимайте поздравления.

Answer 1

[Flying]

Вам нужно определиться для чего именно вы хотите просматривать стили элемента.

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

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

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

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

Если вы считаете что такая функциональность необходима - вам стоит оформить запрос в виде bug report'а, благо bug tracker'ы для движков основных браузеров открыты (Chromium, Firefox, WebKit). Однако при описании подобного запроса вам стоит постараться лучше продумать предлагаемый вами сценарий реализации.

Comments

[weranda]

Если вы считаете что такая функциональность необходима - вам стоит оформить запрос в виде bug report'а

Придумывать, продумывать, писать, чего-то ждать...неизвестно, будет или нет.

[Flying]

weranda, Шанс на то, что это реализуют будет выше если разработчики хотя бы будут знать о таком запросе. Конечно вы можете сами реализовать эту функцию и прислать pull request, но это, естественно, требует совсем другого уровня вовлечения.

Answer 2

[profesor08]

В девтулзах, в стилях отображается конкретно то, что прописано в .css файле или в теге <style>. Это, в первую очередь, важно для разработчиков сайта, чтоб понимать что будет на выходе. Во вторых, так как разработчики используют некую тему, то они не заморачиваются над кодами цветов, они просто используют --btn-color, не заморачиваясь над тем, какой там цвет кода. И браузер всеми силами, в меру своих возможностей, помогает им, предоставляя доступ к отладочной информации.

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

• наводишь на переменную и смотришь ее значение
  
• кликаешь на переменную и переходишь к ее объявлению
  

Если же такой расклад не устраивает, то есть еще варианты:

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