Devtools を使用してページのスクリーンショットを撮る
Web サイトの現在の状態の完全なスクリーンショット、またはその一部をクライアントやチームメイトに見せる必要がある場合があったため、全ページ スクリーン キャプチャ を使用し、他の種類のスクリーンショットには Windows のスニペット ツール または Snaggit を使用してきました。この投稿のようにオンラインでホストしたい場合は、Gyazo にも GIF メーカーがあります。
最近、Devtools に拡張機能を必要とせずにページ全体のスクリーンショットを実行するツールがあることを発見しました。
これは新しい考えではなく、2017 年 4 月の Devtools アップデート に含まれていました。しかし、私は岩の下に住んでいて、今まで気づかなかったようです…
開発ツール
公式 Devtools ページ に記載されているとおり:
Chrome DevTools は、Google Chrome ブラウザに直接組み込まれた Web 開発者ツールのセットです。 DevTools は、ページをその場で編集し、問題を迅速に診断するのに役立ち、最終的にはより良い Web サイトをより迅速に構築するのに役立ちます。
Devtools でのコマンドの実行
Devtools を開く方法はすでに知っていますが、この投稿のために忘れてしまった場合に備えて、キー F12 またはショートカット Ctrl + Shift + I を使用して開いてください。次に、Devtools 内のメニューで Run command を開くか、Ctrl + Shift + P を使用する必要があります。
スクリーンショット ツール
screenshot と入力するとコマンドがフィルタリングされ、使用できるスクリーンショット方法は 4 種類あります。
- エリアのスクリーンショット
- フルサイズのスクリーンショット
- ノードのスクリーンショット
- スクリーンショットをキャプチャする
すべてのスクリーンショット方法を確認する前に、devtools が画像の処理を完了した後、画像は Web ページの名前で自動的にダウンロードされます。
エリアのスクリーンショット
area screenshot を使用すると、Web サイトの一部を選択してスクリーンショットを作成できます。
結果:
フルサイズのスクリーンショット
full size screenshot は、Web ページ全体の最初から最後までのスクリーンショットを撮ります。
結果:
ノードのスクリーンショット
node screenshot を使用すると、inspect 要素で選択したノードのスクリーンショットを作成できます。
結果:
スクリーンショットをキャプチャする
capture screenshot は、スクロールせずに現在のページとブラウザーのサイズのスクリーンショットを撮ります。
結果:
