Chrome で拡張機能を使わずにスクリーンショットを撮る方法

1. はじめに

Chrome ブラウザには、ブラウザウィンドウ上のスクリーンショットを撮る機能が組み込まれています。拡張機能を入れる必要はありません。

Chrome の持っているスクリーンショット機能を使う手順は以下になります。

右上のメニューから [その他のツール] – [デベロッパーツール] を選択するか、Ctrl + Shift + I キー（Macなら Command + Shift + I）を押して デベロッパーツール (DevTools) を開きます。

Ctrl + Shift + P キー（Macなら Command + Shift + P）を押して、デベロッパーツールの持つ Command Menu を開きます。

デベロッパーツールでは、Command Menu からいろいろなコマンドを実行することができます。

Command Menu のところに “screen” もしくは “capture” といった文字列を入力すると、スクリーンショットに関するコマンド（機能）の候補が表示されます。

あとは、以下の選択肢のどれかを選択するとスクリーンショットのキャプチャが実行されます。


スクリーンショット機能	説明
Capture area screenshot （領域のスクリーンショットをキャプチャする）	範囲を選択してスクリーンショットを撮る。
Capture full size screenshot （フルサイズのスクリーンショットをキャプチャする）	スクロールしていない部分も含め、全範囲のスクリーンショットを撮る。
Capture node screenshot （ノードのスクリーンショットをキャプチャする）	特定のノードの部分のスクリーンショットを撮る（予め [Element] パネル内でノードを選択しておく）。
Capture screenshot （スクリーンショットのキャプチャ）	見えている範囲のスクリーンショットを撮る。

スクリーンショットのキャプチャが実行されると、その画像ファイルを保存するダイアログボックスが表示されます。

手順の簡易版です。

※ Capture node screenshot の場合は、あらかじめ要素を選んでおく必要があります。

操作が少し面倒ですが、余計な拡張機能もいりませんし便利だと思います。

特に「Capture full size screenshot」がありがたいです。

What’s New In DevTools (Chrome 59) | Web | Google Developers（リンク切れ？）
- https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots
- Full-page screenshots
What’s New In DevTools (Chrome 62) | Web | Google Developers
- New screenshot workflows
  - Screenshots of a portion of the viewport
  - Screenshots of specific HTML nodes
What’s New In DevTools (Chrome 74) | Web | Google Developers
- Capture area screenshot in the Command Menu