メインコンテンツへスキップ
見る · コピー

好きな要素を選んで、そのまま持ち出そう

Inspect v1.0.0

SuperchargeInspectはどのページでも開けて、好きな要素を選んでそのまま持ち出せます。ホバーしてクリックするか、矢印キーで移動してEnterで固定します。オーバーレイがページ上に直接ボックスモデルを描き、パネルにはフォント、色、余白が表示されます。一度コピーするだけで、テキストとクリーンなスナップショットがクリップボードに入ります。必要ならメモも添えられます。

  • マウスで選択するか、矢印キーで移動してEnterで固定
  • オーバーレイがパディング、マージン、コンテンツボックスをページ上に直接表示
  • 要素ごとにフォント、サイズ、ウェイト、字間、色、ボックスモデルを表示
  • どの値のタイルもクリックでコピー
  • 完全なリファレンスをコピー:テキストとクリーンなPNGスナップショットを1つのアイテムに
  • 最大1200文字のメモをリファレンスと画像のフッターに添付
  • シャドウルート、スロット、SVG、同一オリジンのiframeもすべて選択可能

任意のページを開いてAlt+Shift+Eを押すか、ツールバーのアイコンをクリックします。矢印キーで移動し、Enterで要素を固定すれば、ワンクリックで完全なリファレンスをコピーできます。

要素の選択

選び方は2通り。ホバーしてクリックするか、キーボードだけで操作するかです。左・上・右・下キーで要素間を移動し、Ctrl+↑(MacではOption+↑)で親要素へ、Ctrl+↓(Option+↓)で子要素へ移動します。Enterで要素を固定、Escで1つ戻り、?でショートカット一覧を表示します。ピッカーはShadow Root、スロット、SVG、同一オリジンのiframe内の要素も選択できます。

ボックスモデルをページ上に表示

要素を選ぶと、ページ上に直接描画されます。パディングとマージンは網掛け、コンテンツボックスは枠線で表示され、固定中の要素はアンバー色のハンドル付きリングで示されます。枠線は要素自体のborder-radiusに沿うため、角丸の要素は角丸のまま表示されます。

パネルで詳細を確認

パネルには要素の情報がすべて表示されます。フォントファミリー、サイズ、ウェイト、トラッキングに加え、要素自身のフォントによるライブサンプルも表示。文字色、背景色、ボーダー色はスウォッチで示され、ボックスモデル図はマージン、ボーダー、パディング、角丸、display、gapをカバーします。値のタイルはクリックするだけでコピーできます。上部には親要素のパンくずリストがあり、パネルは左右どちらにもドッキングできます。

メモ

最大1200文字の自由記述メモを追加できます。メモはコピーしたリファレンスとスナップショット画像のフッターに含まれるため、気づいたことも一緒に伝わります。

リファレンスをコピー

コピーすると、テキストとクリーンなPNGスナップショットがひとつのアイテムとしてクリップボードに入ります。テキストには、メモ、ソースURL、ページタイトル、タイムスタンプ、要素のタグとロケーター、表示テキスト、ビューポートと境界、確認されたスタイル、整形済みの要素コードのスニペットが含まれます。フォームの値やページの非表示部分は含まれず、URL内の認証情報パラメータは伏せ字になります。テキストのみ・画像のみのコピーや、PNGをファイルとして保存することもできます。