chromeコンソールから要素単位でスクリーンショットを撮影する

概要

要素ごとにスクリーンショットを撮影したい場合に、一度画面全体を撮影してからトリミングするということをしていたのですが、Chromeのコンソールから要素ごとにスクショが取れる機能があるみたいなのでその方法をメモします。

chrome86から対応しているみたいです。

方法

コンソールを開く => 要素(Elements)タブをクリック => 撮影したい要素で右クリック => Capture node screenshot

で画像を保存できます！