See Chrome for Developers’ activity on LinkedIn

Chrome Developer Relations Engineer (CSS and Web UI) at Google

👀 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. This also works on `calc()` and other mathematical functions like `min()`, which should help *a lot* when debugging these calculations. 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.

15 Comments

Liam O'Riley

Web Developer & SEO Marketing Specialist

Beautiful.

Mohammad Hany Feyz

I build websites & smart bots for people who want to automate, scale, and stand out online | Python back-end developer

The way I see, chrome dev is turning to a monster

2 Reactions

Schalk Neethling

Open Web And Web Accessibility Evangelist, Ethical Source - 🧠 Destigmatizing Mental Illness

This is going to be a game changer 🙌

Luis Torres

CSS is Awesome | I Learn Every Day | Frontend Engineer making things invisible.

This is going to be amazing! 🤩

Shubham Saurabh

Founder & CEO @Auditzy | Real-time Website Performance Monitoring 🚀 | Increasing Social Ads Conversion Rates via by-passing in-app browsers of social media apps using InApp Redirect | Jamsfy

Tarun Kumar