orangeitems’s diary

クラウドで働くエンジニアの日々の感想です(ほぼ毎日更新)。

拡張ツールを使わずに、ChromeでWebページ全体のスクショを取る方法

f:id:orangeitems:20190212000950j:plain

 

Chromeでページ全体のイメージを取得する(PCのみ)

Windows PCで、ChromeのWebページのスクリーンショットを取るときどうしていますか?。ページは縦に長いので、ページ全体をビットマップで取るのは拡張機能などを入れないと難しいですよね。

実は、Chromeの標準機能で取得する方法があります。拡張機能は不要です。

とても簡単なので、紹介しておきます。

 

方法

Webページをひらく

まず、スクリーンショットを取得したいWebページを開きます。

f:id:orangeitems:20190211235909p:plain

こちらは、https://www.yahoo.co.jpの例ですが、縦長のページなので下の方は切れてしまっています。

 

CTRL+SHIFT+iを押す

次に、CTRL+SHIFT+i(アイ)を押してください。

f:id:orangeitems:20190212000028p:plain

右にHTMLが出てきますが気にしません。

 

CTRL+SHIFT+pを押す

次に、CTRL+SHIFT+pを押してください。

右側に、下記のテキストボックスが現れます。

f:id:orangeitems:20190211235539j:plain

 

fullと入力した後、「Mobile Caputure full size screenshot」をクリック

下記のように、fullと入力します。

f:id:orangeitems:20190211235706j:plain

その後、「Mobile Caputure full size screenshot」をクリックしてください。

すると、ファイルにダウンロードできますので保管してください。

なお、CTRL+SHIFT+i(アイ)を押せば元の画面に戻ります。

 

結果

下記のように、ページ全体のスクリーンショットが取得できます。

 

f:id:orangeitems:20190212000257p:plain

 

Webシステムでのシステム試験のエビデンス取得に使うと便利だと思います。

CTRL+SHIFT+i、CTRL+SHIFT+p、full、と覚えておけばサクサク取得できます。

私も仕事で今後使う予定です。

 

備考

ちなみに、MacOSだと、command+option+i、command+shift+p、fullとなるようです。