Chrome DevTools で calc() / clamp() の計算を段階的にデバッグ
DevTools の [要素] > [スタイル] で calc() や clamp() にホバーすると、変数→単位→内側の式→外側の式の順に計算結果が表示される。
どんな時に使う？
clamp(1rem, calc(0.75rem + 1vw), 1.5rem)のような流体タイポグラフィで、いま実際に何 px になっているか知りたいとき。var()の定義チェーンやcqw/vwなどの相対単位が絡んで、どこで値がずれているか追いたいとき。
手順
- 対象要素を DevTools で選択し、[スタイル] タブを開く。
calc()/clamp()/var()を含む値にマウスをホバーする。- ポップアップで、変数の解決 → 相対単位の数値化 → 最も内側の計算 → 外側…と1ステップずつ表示される。
css
/* 例: 確認したい式 */
:root { --width: 1200px; }
.wrapper { zoom: calc(100cqw / var(--width)); }
p { font-size: clamp(1rem, calc(0.75rem + 1vw), 1.5rem); }注意点・対応状況
- Chrome 138 以降の DevTools。
- 値はその時のビューポート/コンテナサイズでの計算結果なので、レスポンシブの確認はウィンドウ幅を変えながら見る。