拡張機能を使わずにサイト全体のスクリーンショットを撮影する方法

前回の記事でChromeならFull Page Screen Captureという拡張機能でサイト全体のスクリーンショットを撮影するのがオススメだと書きましたが、どうやら拡張機能をインストールしなくても、撮影できたみたいです。
デベロッパーツールから撮影する

Chromeの[表示]→[開発 / 管理]→[デベロッパーツール]からデベロッパーツール(開発者ツール)を開いて、表示されるツール左上のスマホアイコンをクリックします。

今回はPC表示の撮影をしたいので、「Responsive」を選択して横幅を決定します。
後は画面右上のメニューアイコンをクリックして「Capture full size screenshot」をクリックすれば、サイト全体の画像がダウンロードできます。
Firefoxの場合
Firefoxにも同様の機能があります(しかもChromeより優秀です)。
アドレスバーの右の三点アイコンをクリックして[スクリーンショットを撮る]を選択すると、スクリーンショットを撮影するモードに切り替わります。

ドラッグすれば選択範囲を撮影できますし、「ページ全体を保存」をクリックすれば全体の撮影ができます。

撮影後には、テキストを入れたりマーカーを引いたりもできます。
デフォルトでここまでできるのはすごいですね。
拡張機能に頼るところ
Chromeの場合は分かりにくいですし、わざわざ「Responsive」を選択して横幅を決める必要が出てくるので、拡張機能の方が早そうです。
また、デフォルト機能だと保存形式がPNGで固定なので、JPGやPDFで保存したい場合は拡張機能を使ったほうがよさそうです。


Macのスニペットアプリ「Dash」の環境設定
macのFinderで不可視ファイルを見れるようにする幾つかの方法
MacのターミナルアプリはiTerm2で決まり!!オススメの設定と基本的な機能まとめ
ATOKの「ATOKパレットの表示」「単語登録」ショートカットキーが、Emacsキーバインドと被るので変更したい
Path Finderの見た目を最低限整えるための設定
Mac起動時に「Default Folder X は Finder のツールバーにボタンを追加しました」というダイアログが表示される場合の対処法
BetterTouchToolでトラックパッドの端っこのクリックを無効化して、手が軽く触れることによる誤操作を防止する
Keynoteのプリセットカラーを好みの色にカスタマイズする方法
Macの文字入力をもっと楽にする小技集
Drive File Streamの中にあるフォルダを登録して、Alfredから検索結果に表示する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Alfredのクリップボード機能に履歴がちゃんと残らない・別のテキストが残ってしまう場合の対処法
Apple Watchでスクリーンショットを撮る方法
Alfredの検索ボックスを、磨りガラスのように背景がぼやけた見た目にする方法
Path Finderで左サイドバーとは別に、「Favorites」だけを表示させる右サイドバーを表示する
Jedit Ωに「別名で保存」のショートカットキーを割り当てる方法
Macのエイリアスとシンボリックリンクの違いや作成方法
Macのホームディレクトリにある設定ファイルをDropboxで管理する
Alfredのランチャー(メインウインドウ)が邪魔で後ろが隠れてしまうときの対処法
FontExplorer X Proを使ってフォントの管理を行う
CSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました