Chromeの開発者ツールを使って特定の場所だけスクリーンショットする方法

特定のDOM要素(ページ上のDIV、HTML、BODY要素のようなもの)のみスクショする機能がChromeにはありますのでご紹介します。

例えば、手牌作成ツールで作成した牌姿をスクショしてみます。
https://www.yoshidamasaaki.com/haishi-generator/

Command + Shift + c で開発者ツールを起動し、スクショしたい場所にカーソルを合わせて、開発者ツールのElementsタグにてDOMが選択されている状態にします。

この状態で Command + Shift + p を押すと文字入力欄が開くので、node screenshot と打ち込むと

Capture node screenshot

という選択肢が出てきます。

そのまま Enter するとそのDOMのみの画像がダウンロードフォルダに保存されます。

素晴らしい機能ですな。


この記事をシェアする