Chrome 開発者ツールでは、ノードのスクリーンショットをキャプチャできます。残念ながら、ノードの表示されている部分しかキャプチャされません。完全なノードが必要です。
「フルサイズのスクリーンショットをキャプチャ」コマンドもありますが、これはページ全体をキャプチャします。必要なのは単一のノードだけです。
では、フルノード（画面よりも高い）をキャプチャするにはどうすればよいでしょうか?
答え1
ノードのスタイルを変更してノード全体が表示されるようにしてからノードのスクリーンショットを撮るか、ページの他の要素を削除してページ全体のスクリーンショットを撮ることができます。
ノードのスクリーンショット付き:
- ノードのスタイルを編集して、最大の高さまで伸ばします (height、max-height などを削除します)
- 必要に応じて隣接する要素を削除する
- ノードのスクリーンショットをキャプチャします。
ページのスクリーンショット付き:
- スクリーンショットを撮りたいノードを
bodyタグの直下の子孫になるように移動します - ページの他の表示要素を削除する
- ノードのスタイルを編集して、最大の高さまで伸ばします。
- 全ページのスクリーンショットを撮ります。
「要素を削除」オプションを使用してページの要素を削除できます。