¿How to debug calc() in browsers?
Hello, I would like to know if you know of any tool or technique to evaluate or debug CSS calc() expressions. When these become complicated, it's difficult to trace what's happening.
Best regards and thank you very much.
3 Replies
I don't think there is a obvious way to do it, and this answer on stack overflow might confirm that
Stack Overflow
How do I debug CSS calc() value?
I have relatively complex formulas e.g. transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
how do I debug
I opened a year ago a feature request in Chromium and it was accepted, but there has not been any updates ever since:
https://issues.chromium.org/issues/40885245
I know how complex it could be, and that it could, in some scenarios, require multiple rendering passes, but I can't understand why browsers don't provide a developer option to debug it. Doing CSS is starting to become complex enough to warrant these kinds of features.