これは気がつかなかった！デベロッパーツールでcalc()やclamp()などの計算値が簡単にデバッグできて便利すぎる

Post on:2026年2月26日

sponsorsr

Chromeのブラウザはアップデートをチェックしていましたが、デベロッパーツールはなんとなくしか見ていませんでした。

デベロッパーツールで、CSSのcalc()やclamp()などの複雑な計算式やvwやcqwなどの相対単位が簡単にデバッグできるようになっています。

デベロッパーツールでcalc()やclamp()などの計算値が簡単にデバッグできて便利すぎる

使い方は、簡単です。
まずは、calc()やclamp()を使ったCSSを用意します。

p{
  font-size: clamp(1rem, calc(0.75rem + 1vw), 1.5rem);

}

p{
  font-size: calc(clamp(16px, calc(1vw + 1em), 24px) + 20%);
}

:root {
	--width: 1200px;
}
p{
  width: var(--width);
  zoom: calc(100cqw / var(--width));
}

font-size: clamp(1rem, calc(0.75rem + 1vw), 1.5rem);

}

font-size: calc(clamp(16px, calc(1vw + 1em), 24px) + 20%);

}

:root {

--width: 1200px;

}

width: var(--width);

zoom: calc(100cqw / var(--width));

}

デベロッパーツールを開き、[要素] > [スタイル]タブでcalc()やclamp()をホバーすると、変数の定義チェーンや計算値など複雑なCSSの計算式を段階的にデバッグできます。

「段階的」というのがポイントで、最初に変数を処理して、次にvwやcqwなどの相対単位を数値にし、最内の計算式を処理し、外側の計算式へと一行ずつ複数行で表示されます。

デベロッパーツールのこの機能は、Chrome 138+で利用できます。
詳しくは、Debug complex CSS values easier

CSSのclamp()関数を使ったフォントサイズの設定は、下記をご覧ください。

レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Size Matters

これなら超簡単！ CSSのclamp()によるレスポンシブ対応のフォントサイズを数クリックで定義できるツール

元ネタは、下記ポストより。

When did they add this?

Chrome devtools now shows the computed step values for css calc + variables

Makes debugging 100x easier pic.twitter.com/j5Zn1IjNoW

— Wes Bos (@wesbos) February 17, 2026