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

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

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

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

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

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


BetterTouchToolでHTMLを使った表示を作成できる「Floating WebView」機能
Google Chromeのブックマークを綺麗に整理するコツ
Path FinderとFinderをいい感じに共存させるための設定
Karabiner-Elementsでcaps lockで修飾キー全押し、caps lock + 修飾キーで押したキー以外の修飾キーを押す方法(reverseキー)
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
アクティビティモニタで「kernel_task」の暴走を落ち着かせるためには、CPU温度を下げる必要がある
Finderで選択したフォルダをVisual Studio Codeで開くAlfred Workflowの作り方
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ウェブサイト内の動画キャプチャから保存して共有までをスムーズに行うChrome拡張機能「Screencastify」
BetterTouchToolでウィンドウが最大化された状態で「ウィンドウを右に最大化」すると左に移動してしまう問題
iPadでスクリーンショットを撮るいくつかの方法
Macを起動したのが平日か休日か判定して、起動するアプリを変えるKeyboard Maestroマクロの作り方
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」
MacでYouTubeの動画再生速度を4倍速にする方法
Workspacesに新たな機能を追加する「プラグイン」の追加方法と使い方
Ulysses編集画面の画像プレビューが小さすぎる場合の対処法
ブログのテーマを完全オリジナルのものに変更しました