Google Chromeのデベロッパーツールを使ってページ全体のスクリーンショットを撮影する方法

Google Chromeのデベロッパーツールを使ってページ全体のスクリーンショットを撮影する方法

Google Chromeのデベロッパーツールを使ってページ全体のスクリーンショットを撮影する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Google Chromeのデベロッパーツールを使って、閲覧中のページ全体のスクリーンショットを撮る方法をご紹介いたします。

デベロッパーツールを使えば、拡張機能を入れなくてもページ全体のスクリーンショットが撮影可能です。

スポンサードリンク

Google Chromeのデベロッパーツールを使ってページ全体のスクリーンショットを撮影する方法

ページ全体のスクリーンショットを撮影したいページを開き、[Ctrl]+[Shift]+I もしくは[F12]を押下してデベロッパーツールを開きます。Macの場合は[Command]+[Option]+I です。

デベロッパーツールの起動

[Ctrl]+[Shift]+P を押下します。Macの場合は[Command]+[Shift]+P です。以下のような検索ボックスが表示されます。

デベロッパーツールの検索ボックス

表示された検索ボックスに”Capture”や”full”と入力し、「Capture full size screenshot」を選択します。

Capture full size screenshot

「Capture full size screenshot」をクリックすると、ページ全体のスクリーンショットを撮影し、画像としてダウンロードされます。

ちなみに、当ブログのトップページを撮影したのがこちらです↓

トップページのスクリーンショット

あとがき

ボタンクリックで撮影完了!というわけにはいきませんが、拡張機能なしでページ全体のスクリーンショットが撮影できるのは便利ですね。スクリーンショットの精度も高いです。

拡張機能だといつ開発が終了してしまうかわからないので、上記の方法を覚えておくと役立つと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。