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

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

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

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

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

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


Alfred 4の詳細設定(Advanced)を見直してAlfredを更に便利にする
Visual Studio Codeでミニマップ関連を見やすくするカスタマイズ方法
macOS Mojaveのスクリーンショット機能についてまとめる
Backlogの課題期限をカレンダーアプリのFantastical 3に表示させる方法
ウインドウリサイズを素早く行う!BetterTouchToolのウインドウスナップ機能の自分なりのカスタマイズ設定
Hazelがちゃんと動作していない?そう思ったときに確認すること
Hazelを使って、最近使用していないアプリケーションやフォルダにラベルを貼って可視化する
ウェブサイト内の動画キャプチャから保存して共有までをスムーズに行うChrome拡張機能「Screencastify」
Biscuitで普段はブラウザでリンクを開きつつ、ダウンロードリンクはBiscuitで開く方法
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Alfred4の電卓機能で「x」を乗算記号として認識させる方法
HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法
MacのRubyをrbenvで管理する方法
AlfredでFigmaのチーム・プロジェクト・ファイルを素早くの検索ができる「Alfred Figma Workflow」
Path Finderの「閉じたタブの開き直し」ショートカットキーを他アプリに合わせる
MacでCPUやメモリ・ネットワークなどの状態をメニューバーに表示させる「iStat Menus」
Biscuitを便利に使いこなすためのショートカットキー
Google日本語入力のRomaji tableを設定して、ローマ字入力する感覚で絵文字を表示させる方法
CSS Nite in Kobe, vol.38 デザイン批評基礎講座 〜センスで語らないデザインの伝え方〜に参加してきました
MacWinZipperでWindowsでも文字化けしないZipフォルダの作り方