Webstudio
Log in

Join the Webstudio community

Updated 6 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
JJeremy
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));
1
J
O
B
19 comments
JJohn Siciliano
hold alt 🙂
OOleg Isonen
OMG I DIDN'T REALIZE @TrySound already implemented it
OOleg Isonen
testing it now and see a few bugs:
  1. value has no unit, prob should be px?
Attachment
image.png
OOleg Isonen
  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
OOleg Isonen
  1. why is it showing the computed value as a second parameter here? 🙂
Attachment
image.png
BBogdan
This is the exact browser behavior
BBogdan
there is no px in "space" section. Why would here be different?
OOleg Isonen
iknow, I think it just looks a little weird/broken how we represent it
BBogdan
Looks like side effect of value preview in autocomplete
BBogdan
Will fix
JJeremy
@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.
JJohn Siciliano
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
JJeremy
Oh!!! I wasn't hovering inside of the tool-tip! Thanks for the assist.
JJohn Siciliano
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
OOleg Isonen
we also need to communicate somewhere this hidden shortcut
JJohn Siciliano
its in the hidden docs 😉
Attachment
Screenshot_2024-12-05_at_10.01.18_AM.png
OOleg Isonen
I mean in the UI, finding a way to show it
OOleg Isonen
might be not that easy actually
BBogdan
Fixed variable fallback
https://github.com/webstudio-is/webstudio/pull/4521
Add a reply
Sign up and join the conversation on Discord