Post

👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.

29/5/25, 1:32 pm56 reposts299 likes

@bartspaans.com

Amazing feature

That’s very cool. A calculation process of these vars

I love this!

@alakbarnurul.bsky.social

AMAZING. GREAT. HUGE.

@scottykaye.com

this is awesome

@stevenw.bsky.social

Great to hear, I was recently becoming annoyed at the current behavior

Is that just a dev tool feature? This would be actually cool in design systems docs as a component.

Sean van Zuidam

This also works on `calc()` and other mathematical functions like `min()`, which should help *a lot* when debugging these calculations.

@kapitar.bsky.social

Ah, this is very cool! I was thinking that some variant of this feature already exists, but perhaps it just shows you the definition of a referenced variable, not the intermediate evaluations.

Indeed: this thing shows you all intermediate evaluations.

@kapitar.bsky.social

Very cool! I don't actually use Chrome (probably one of the only people making web apps who can say that) but this one thing would make me check it out!

@anatudor.bsky.social

Doesn't seem to work for me? Chrome 138 on Ubuntu.

Are you on the latest Chrome Beta?

@anatudor.bsky.social

Chrome 138, like it can be seen in the video.

What I really like about this feature is that you can also hover sub-parts of each the calculation in the tooltip. When doing so, DevTools will highlight the relevant part in each row of the trace.

This is going to be such a nice quality of life improvement!

Emmie Päivärinta

@about1em.bsky.social

A bit OT but I'd really love to see something like this for @typescriptlang.org, often you're more interested in the resolved types.