見る · コピー 好きな要素を選んで、そのまま持ち出そう
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をファイルとして保存することもできます。