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

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

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

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

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

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


定番のパスワード管理ツール「1Password」を使ってパスワードの管理をする
Adobe XD × Keyboard Maestroでここまでできる!ショートカットキーであらゆることを実現するマクロサンプル
Macのダイアログを強化するDefault Folder Xの使い方
MacのSublime Textを日本語化する方法
Keyboard MaestroでGoogle Chromeのタブグループ化にショートカットキーを割り当てておく
1Passwordでウェブサイトの入力フォームを一瞬で入力する方法
Path Finderのデュアルブラウザ機能をもっと便利に使いこなすための勘どころ
日々のやり取りを便利にしてくれるチャットサービス統合アプリの比較!Franz・Rambox・Station・Stack・Biscuit
Fantastical 3がサブスクリプションモデルになりUIが刷新!予定の管理がさらに便利になる機能が追加
Chrome拡張機能のVimiumを使ってキーボードだけでブラウザを操作する
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法