Join the Webstudio community

Updated 2 months ago

Display calculated values

At a glance

The post discusses the ability to view computed CSS values in Firefox developer tools and the desire to have this feature in the Webstudio tool. Community members discuss various aspects of this, including:

- Holding the alt key to see the computed value

- Potential bugs, such as the value having no unit or not displaying properly when the variable has no value

- The behavior of showing the computed value as a second parameter

- Issues with the representation of the computed value, especially for the "space" section

- The need to communicate this hidden shortcut to users

A community member mentions that a fix for the variable fallback issue has been implemented in a pull request.

Useful resources
You can view the computed value (2nd image) in FF dev tools. It would also be cool to see this in Webstudio (1st image).

I set up a project a few days ago and returned to it today. I didn't remember the property setting, so I needed to go to my global root and search for the value.

It would be even cooler if it could handle things like: calc(var(--property-1) + var(--property-2));
Attachments
CleanShot_2024-12-04_at_19.27.262x.png
CleanShot_2024-12-04_at_19.29.222x.png
1
J
O
B
19 comments
OMG I DIDN'T REALIZE @TrySound already implemented it
testing it now and see a few bugs:
  1. value has no unit, prob should be px?
Attachment
image.png
  1. when variable holds no value, it looks like this, but probably should say something like undefined or idk, otherwise it looks like its broken
Attachment
image.png
  1. why is it showing the computed value as a second parameter here? πŸ™‚
Attachment
image.png
This is the exact browser behavior
there is no px in "space" section. Why would here be different?
iknow, I think it just looks a little weird/broken how we represent it
Looks like side effect of value preview in autocomplete
@John Siciliano Doesn't this just show the opposite style as well? Eg, top & bottom if I hover over the top one? This is what I see.
It'll show the value of the variable. On spacing, alt does highlight both sides so its doing both; showing both sides and the values of them
Oh!!! I wasn't hovering inside of the tool-tip! Thanks for the assist.
You shouldnt need to hover the tooltip.. i just was doing that to point where I was looking

But I noticed it doesnt work unless the label is blue... so you need to be on the place where the style is set
we also need to communicate somewhere this hidden shortcut
its in the hidden docs πŸ˜‰
Attachment
Screenshot_2024-12-05_at_10.01.18_AM.png
I mean in the UI, finding a way to show it
might be not that easy actually
Add a reply
Sign up and join the conversation on Discord