要素のスクリーンショット｜AIコーディング用メモ付き

画面全体ではなく、ボタンやカードを1つだけ画像にしたい。でも手作業で切り抜くのは面倒。SuperchargeInspectは、1つの要素をキャプチャしてメモを追加できる拡張機能で、AIコーディングツールに意図を正確に伝えられます。要素にカーソルを合わせ、Enterキーでロックし、その要素に合わせて切り抜かれたPNGをコピーまたは保存します。切り抜きはタブの表示部分から作成され、AIコーディングツールやチャット、チケットにそのまま貼り付けられます。

要素の画像をコピーする3つの方法

ロックした要素では3つの操作が使えます。2つは「その他のコピー方法」メニューにあり、3つ目は「参照をコピー」ボタンそのものです。

「画像のみコピー」と「PNGを保存」では、フッターなしの切り抜き画像が得られます。「参照をコピー」は注釈付きの要素スクリーンショットで、テキストの参照情報とPNGを1つのクリップボード項目にまとめます。要素がまだロックされていない場合は、Ctrl+Enter（macOSでは Cmd+Enter）でロックとコピーを一度に行えます。

注釈付き要素スクリーンショットに含まれる情報

「参照をコピー」では、表示されている切り抜き部分を白い背景に描画し、1600 x 1200 に収まるよう縮小したうえで、その下にラベル付きの行からなるフッターを追加します。行は Your note、Source、Element、Styles です。Source はページのアドレス、Element は要素のロケーターです。Styles 行には、最初の font-family、font-size と line-height、font-weight、背景上の文字色（16進数）、padding、border-radius が含まれます。

このフッターがあるからこそ、CSSの参照情報付きスクリーンショットになります。メモと主要なスタイルが含まれるため、画像だけでAIコーディングツールに内容が伝わります。チャットやチケット、AIコーディングツールに貼り付ければ、受け取った側はページを開かなくても、どこを指しているのかがわかります。

適切な要素の選び方

Alt+Shift+E で検証を開始します。ページ上にマウスを置くか矢印キーで移動し、目的の要素まで進みます。1つの要素だけをスクリーンショットしたい場合は、見せたい内容を含む最も小さい要素で止めます。ラベル1つではなくカード全体を撮りたい場合は、Ctrl+Up（macOSでは Option+Up）で親要素へ移動します。子要素へは Ctrl+Down（macOSでは Option+Down）で移動できます。Enter キーでロックしてから画像をコピーします。

画像に含まれるのは画面上に表示されている部分だけなので、キャプチャする前に要素が見える位置までスクロールしてください。

スクリーンショットはデバイス上で処理

切り抜きはタブの表示部分をもとに、お使いのデバイス上で作成されます。この拡張機能はネットワーク通信を行わず、アカウントも不要で、検証した内容がサーバーに送信されることは一切ありません。画像がデバイスの外に出るのは、「PNGを保存」で保存したときか、別のアプリに貼り付けたときだけです。その後の扱いは、貼り付け先のアプリによります。

注釈付きスクリーンショットをメモ付きでAIコーディングツールに送る。