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

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

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

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

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

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


SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる
Fantastical 3とTodoistを連携してスケジュールとタスクをまとめて管理する!
Google Chromeでいま開いているページのQRコード生成方法
Google DriveのmacOSアプリ「バックアップと同期」のインストールと最低限の設定方法
Alfred 4のファイル検索機能を使って、ファイルの操作を高速で行う方法
ブラウザ × Keyboard Maestroでちょっとした操作をラクにするマクロサンプル
チャットサービス統合アプリのStationがChrome拡張機能になって登場!キーボードだけでよくアクセスするサイトへ移動できる
Finderで選択したフォルダをターミナルで開く方法まとめ
Alfredを立ち上げたら自動で入力モードを「英数」に切り替える設定方法
Stationの「My custom apps」機能を使って好きなウェブサイトをStationに追加する
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Macの画面を手軽に録画できるアプリ「Kap」
Google Drive内のドキュメントを検索して開けるAlfredのWorkflow「Google Drive Workflow for Alfred」
コード管理に特化したノートアプリ「Quiver」でコードの管理を行う
Path Finder 8の「パスのコピー」の種類とその違いについて
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
ATOKのクラウド推測変換やナントカ変換を使って、単語をラクで正確に変換する
どうやって自分のデザインを伝える?「デザインの伝え方・話し方講座」CSS Nite in KOBE, Vol.27
Backlogで2段階認証を設定後、SourceTreeでアカウントエラーが発生する場合の対処法
Orbital 2で共通の設定を使い回すためのテンプレートファイルを作成する方法
Alfredのランチャー(メインウインドウ)が邪魔で後ろが隠れてしまうときの対処法