How do I debug CSS calc() value?

Is there a way to validate/highlight formulas errors?

You need to check to see if you aren’t breaking any rules when defining your formula. Here it is from the specification:

At each operator, the types of the left and right argument are checked for these restrictions. If compatible, the type resolves as described below (the following ignores precedence rules on the operators for simplicity):

• At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.
• At *, check that at least one side is <number>. If both sides are <integer>, resolve to <integer>. Otherwise, resolve to the type of the other side.
• At /, check that the right side is <number>. If the left side is <integer>, resolve to <number>. Otherwise, resolve to the type of the left side.

If an operator does not pass the above checks, the expression is invalid

It may sound a bit complex at the start but the rules are easy, and we can re-write them as follows with easy words:

• You cannot add/subtract two different types (5px + 5s has no meaning).
• You can only multiply with a number (5px * 5px has no meaning and is not equal to 25px).
• You can only divide with a number that isn’t 0 (5px / 5px has no meaning and it’s not equal to 1 or 1px).

If you don’t break any of these rules, then your formula is correct. Let’s not forget another important syntax rule:

In addition, white space is required on both sides of the + and – operators. (The * and / operaters can be used without white space around them.)

Consider this, you simply need to identify if your CSS variable is a number/integer or defined with a type (length, frequency, angle or time). If it’s not defined or contains a string value then the calc() will be invalid.

Check the specification for more details and a more precise explanation: https://drafts.csswg.org/css-values-3/#calc-type-checking

How do I debug calculated value?

To check the computed value, I don’t think there is a way because the computed value of calc() can be different depending where you use it (which property). In other words, the final value doesn’t exist until it’s been used within a property.

We may think that some formulas are trivial like calc(5px + 5px) which will always compute to 10px but other ones will be more difficult. Like calc(5px + 50%) where % will behave differently based on a property. Considering this, the browser will never compute the value until it’s used within a property.

Even with the use of JS you cannot have the final value you want to debug; you can only get a computed value of properties:

var elem = document.querySelector(".box");
var prop = window.getComputedStyle(elem,null).getPropertyValue("--variable");
var height = window.getComputedStyle(elem,null).getPropertyValue("height");
console.log(prop);
console.log(height);

.box {
  --variable: calc(5px + 5px);
  height:var(--variable);
}

<div class="box"></div>