メインコンテンツへスキップ

無料 · アカウント不要 · ローカル処理

あらゆる要素を検証。値をコピーしてAIコーディングツールへ。

要素にカーソルを合わせるだけで、フォント・色・余白を確認できます。そのままAIコーディングツール用にコピーできます。

アカウント不要 · ネットワーク通信ゼロ

Chromeに追加 — 無料 このページを検証
Supreme Bold · 700

Ag

  • Ink
  • Amber
  • Paper
Aa Bb Cc 012392 / 1.0 / −0.028em

ボタンを押すと、カード上に実際のパネルが開きます。ページ上の好きな箇所にカーソルを合わせてみてください。

パネル

すべてをひと目で

要素をロックすると、パネルがすべての情報をタイポグラフィ、カラー、ボックスの3つのセクションにまとめます。表示される各値は、ワンクリックで個別にコピーできます。

  • タイポグラフィ フォントファミリー、サイズ、ウェイト、字間を確認できます。
  • カラー テキスト、背景、ボーダーの色をHEX形式で確認できます。
  • ボックス padding、margin、gap、角丸（radius）、display を確認できます。
または AltShiftE を押す
見本カードの Ag グリフにロックした SuperchargeInspect パネル：タイポグラフィ、カラー、ボックス、メモ欄、「参照をコピー」。 見本カードの Ag グリフにロックした SuperchargeInspect パネル：タイポグラフィ、カラー、ボックス、メモ欄、「参照をコピー」。

参照をコピー

要素をAIツールに渡す

短いメモを書いてから、参照をコピーします。

  • メモ、ページのアドレス、要素のロケーター、スタイル、マークアップの抜粋。
  • ロックした要素とその周辺を示す注釈付きスクリーンショット。
  • テキストのみ・画像のみのコピーや、PNGとしての保存もできます。
「参照をコピー」で作成した参照画像：Ag グリフを切り抜いて枠で囲み、「Ag の見出しには Supreme Bold を使う。」というメモ、ページのアドレス、スタイルの行を添えています。
デモではページを再描画してスクリーンショットを再現しています。インストールした拡張機能は実際のタブをキャプチャし、その内容を外部に出しません。
  • ネットワーク通信 0 データはどこにも送信されません
  • アカウント なし 登録は一切不要
  • パネルのセクション 3 タイポグラフィ、カラー、ボックス
  • コピー方法 5 値、参照、テキスト、画像、PNG

キーボードで操作する

  • Alt+Shift+Eアクティブなページで検証を開始します。ツールバーのボタンからも開始できます。
  • Arrow keysページ内の前または次の要素に移動します。
  • Ctrl+Up / Ctrl+Down親要素または子要素に移動します。macOSではOption+UpとOption+Downを使います。
  • Enterポインターを合わせている要素をロックします。もう一度押すとメモを書けます。
  • Ctrl+Enter参照をコピーします。macOSではCmd+Enterを使います。ロック前に押すと、ロックしてからコピーします。
  • Esc要素の選択に戻るか、パネルを閉じます。

ローカル完結でプライベート

プライバシーを最優先した設計

ネットワーク通信なし、アカウント不要。

  • ネットワーク通信はなく、どのサーバーにもデータを送信しません。
  • アカウントは不要で、デバイスから何かがアップロードされることは一切ありません。
  • スクリーンショットがデバイスの外に出るのは、保存または貼り付けた場合だけです。
  • 保存されるのは、ページごとの最後の選択とテーマの設定だけです。

各機能ガイドの内容

よくある質問

SuperchargeInspectとは？
SuperchargeInspectは、CSSと要素を検証するためのツールです。ページ上の任意の要素にカーソルを合わせると、フォント、色、余白をひとつのパネルに表示します。値をひとつだけコピーすることも、メモと注釈付きスクリーンショットを添えてすべてをAIコーディングツール向けにコピーすることもできます。
サイトで実際に表示されているフォントがわかりますか？
表示されるのは宣言されたフォントファミリーで、実際に描画されたフォントを検証したものではありません。パネルにはリストの最初のファミリーが表示され、コピーすると宣言されたスタック全体を取得できます。これはページが指定しているフォントです。画面上で実際にどのフォントが描画されているかは確認しないため、宣言上のファミリーとして参照してください。
どのカラー形式で表示されますか？
色はHEXで表示されます。対象は文字色、背景色、そしてボーダーがある場合はボーダーの色です。一部が透明な色はrgba値で、完全に透明な色はtransparentと表示されます。色をクリックすると、その値をそのままコピーできます。
AIコーディングツール向けには何がコピーされますか？
短いメモを書いてから、参照をコピーします。コピーされるテキストには、メモ、ページのアドレス、要素とそのロケーター、ビューポートのサイズとスクロール位置、要素の位置とサイズ、実際に適用されているスタイル、短いマークアップの抜粋が含まれます。注釈付きスクリーンショットには、要素とメモ、アドレス、短いスタイル情報が表示されます。
データはどこかに送信されますか？
いいえ。検証した内容はすべてお使いのデバイス内にとどまります。この拡張機能はネットワーク通信を行わず、データも送信しません。アカウントもありません。スクリーンショットがデバイスの外に出るのは、保存したときやどこかに貼り付けたときだけです。貼り付けた先のアプリがそれをどう扱うかは、そのアプリ次第です。
いつ、どこで入手できますか？
現在、Windows、macOS、Linux 上の Chrome と Edge で利用できます。Chrome Web Store または Microsoft Edge アドオンから入手してください。無料で、アカウントも不要です。

インストールは3秒。設定は一切不要。

あらゆる要素のフォント、色、余白をひとつのパネルに表示するローカルの要素検証ツール。値はメモや注釈付きスクリーンショットとまとめてコピーでき、AIコーディングツールにそのまま渡せます。

Chromeに追加 — 無料

チケットに添える証拠

バグは説明するより見せましょう。

検証中にレイアウト崩れを見つけたら、タブを録画するか全画面スクリーンショットを撮って、そのままGoogleドライブに共有できます。透かしなし、アカウント不要です。

Chromeに追加

無料 · 100%ローカル · アカウント不要