Debugging CSS Custom Properties

In sharing a technique for determining viewport dimensions with CSS, Temani Afif demonstrated that counters can be used to display the current (numeric) value of custom properties in any given context.

:root {
    --my-value: 123;
}

body::before {
    content: counter(my-counter);
    counter-reset: my-counter var(--my-value);
}

This seems useful for debugging purposes, revealing the respective value right there on the page instead of arduously inspecting individual instances via developer tools.