Как вы просматриваете переменные CSS в браузере?

Я определяю свои переменные согласно спецификации следующим образом:

:root {
 --my-colour: #000;
}

И доступ к ним следующим образом:

.my-element {
  background: var( --my-colour );
}

Что отлично работает.

Однако мне было интересно, есть ли способ отладки или проверки правила CSS :root, чтобы определить, какие переменные были определены, и каковы их значения?

По моему мнению, селектор :root и html, как правило, нацелены на один и тот же элемент, но когда я проверяю элемент html с помощью инструментов отладки Chrome, я не вижу ничего определенного:

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

Ответ 1

Используя Chrome Canary, вы можете получить к нему доступ, просмотрев элемент Вычислимые стили и включив фильтр "Показать все":

...

Ответ 2

Safari (43) - в инструментах разработчика есть небольшая иконка, которую вы можете щелкнуть, чтобы показать значение.

Firefox (58) - в инструментах разработчика CSS-вары имеют пунктирную линию, когда вы наводите курсор, значение отображается в виде всплывающей подсказки.