YOHAKU

検証ツールを開かずに、任意のビューポート幅でmargin・padding・gapを確認できます。

YOHAKUは、ページ上の要素にカーソルを重ねるだけで、margin・padding・gapの実測値をその場で確認できるChrome拡張機能です。 主な機能 ・ホバー中の要素のmargin、padding、gapを色分けして可視化 ・各余白の実測値をpxで大きく表示 ・ビューポート幅を任意の値へ変更し、レスポンシブ表示を確認 ・375px、768px、1600pxのプリセットを用意 ・RESETで実際のビューポート幅へ戻す ・画面左下のインジケーターから表示のON/OFFと設定画面の表示が可能 使い方 1. 拡張機能を有効にします。 2. 確認したいページで要素にカーソルを重ねます。 3. 余白が色分けされ、実測px値が表示されます。 4. 必要に応じて設定画面からビューポート幅を変更します。 ビューポート幅のエミュレーションにはChromeのデバッグ機能を使用します。ページ内容を外部へ送信・収集することはありません。