How to take a screenshot by scrolling a vertically long screen on Mac

キリン
Updated : Sep 17, 2021

I will introduce you how to take a screenshot of the entire screen that is long need to scroll on your Mac.

There are two main patterns, one is to capture a web page and the other is to capture a screen of an application other than the web.

 

Take a screenshot of the entire portrait screen of a web page

List of each method and advantages / disadvantages

It is summarized in the list below.

Only ① is the PDF format, and ② to ⑦ are PNG and JPG image formats.

② to ⑦ are one vertically long image file, but since ① is a PDF, the pages will be interrupted, so be careful.

Method Advantage Disadvantage
① Web browsers
PDF printing
  • Standard function
  • Very easy to use
  • Images are cut off
    between pages
② Safari
develop mode
  • Standard funcion
  • Easy to use
  • Nothing special
③ Google Chrome
developer mode
  • Standard funcion
  • Easy to use
  • Nothing special
④ Google Chrome
extensions
  • Can choose
    from a variety of extensions
  • Easy to use
  • Need to install
    extensions
⑤ Firefox
screenshot
  • Standard funcion
  • Very easy to use
  • Nothing special
⑥ Microsoft Edge
Web Capture
  • Standard funcion
  • Very easy to use
  • Nothing special
⑦ Dedicated app
“BrowseShot”
  • Very easy to use
  • Need to install the app
  • Since the last update
    was in 2014,
    the display
    may not work.

 

From the above, the recommendations are as follows.

Method Recommend
When PDF saving is enough
If you use Firefox
If you want to use
only standard functions
If you can use
the extensions
If you are not familiar
with Mac use
and want to make it
as easy as possible

 

① Web browsers PDF printing

File folders

When printing with a web browser, if you set the output destination as PDF instead of printer, it will be output as a PDF file on consecutive pages.

 

② Safari develop mode

Elephants in safari

▶ Start “Safari” and select “Safari” – “Preferences…” from the menu bar.

Mac "Safari" Preferences

 

▶ When “Preferences” opens, click “Details” at the top of the screen.

Mac Safari "Preferences"

 

▶ After switching to “Details”, check “Show Develop menu in menu bar” indicated by the arrow in the figure.

If you check it, close the “Preferences” screen.

Mac Safari "Preferences"

 

▶ From here, let’s actually take a screenshot.

Display the screen you want to take a screenshot of and press the following keys on your keyboard at the same time to bring up “Develop Mode”.

option ⌥ + command ⌘ + I (ai)

Mac US Keyboard

 

▶ When you see the “Develop Mode” screen as shown, the html code screen labeled <body> should probably be flipped, so right-click there to display the menu.

Mac Safari Develop mode

 

▶ Select “Capture Screenshot” from the right-click menu.

Mac Safari "Capture Screenshot"

 

▶ After a few seconds, a pop-up screen for specifying the save destination will be displayed.

Specify an appropriate location and click the “Save” button.

Mac File save commandbox

 

▶ Once saved, specify the file and press the Space key on your keyboard to see if it can be viewed in Quick Look.

Mac QuickLook

 

③ Google Chrome developer mode

UFO bread

▶ Display the screen you want to take a screenshot in Google Chrome and press the following keys on the keyboard at the same time to call “Developer Mode”.

option ⌥  +  command ⌘  +  I (ai)

Mac US Keyboard

 

▶ When the “Developer Mode” screen appears as shown, click the three-line menu (Vertical Ellipsis) displayed near the center of the top of the screen.

Google Chrome Developer mode

 

▶ When the menu appears, click “Capture full size screenshot”.

Google Chromeの開発者モード画面でフルスクリーンショット呼び出し

 

▶ After a few seconds, a pop-up screen for specifying the save destination will be displayed.

Specify an appropriate location and click the “Save” button.

Mac File save commandbox

 

▶ Once saved, specify the file and press the Space key on your keyboard to see if it can be viewed in Quick Look.

Mac QuickLook

 

④ Google Chrome extensions

Level up

There are several extensions that allow you to take full-screen screenshots, but here I recommend the following apps.

The recommended points are that it is simple to use, free of charge, has many users, and has been updated recently.

Screeny
Screenshot Tool & Screen Recorder. Take and edit screenshots! Record a video from the camera or capture it from the screen (desktop)

 

I will not explain how to use it because you can see how to use it immediately, but you can do a full screen capture by clicking the button of the cat that stretches vertically as shown in the figure.

Google Chrome Extension ""Screenshot & Screen Video Recorder

 

⑤ Firefox screenshot

Fox

▶ Display the screen you want to take a screenshot in Firefox, right-click in the margin of the screen, and click “Take Screenshot” from the displayed menu.

Firefox

 

▶ When the screenshot screen appears, click “Save full page” in the upper right.

Firefox Screenshot

 

▶ When the screenshot is complete, you can see it on the scrollable screen as shown.

If you want to save it, click the “Download” button to save it.

Firefox Screenshot

 

⑥Microsoft Edge Web Capture

Spiral staircase

▶ Display the screen you want to take a screenshot in Microsoft Edge, right-click in the margin of the screen, and click “Web Capture” from the displayed menu.

Microsoft Edge Web Capture

 

▶ When the screenshot screen appears, click “Capture full page” at the top of the screen.

Microsoft Edge Web Capture

 

▶ When the screenshot is complete, you can see it on the scrollable screen as shown.

If you want to save it, click the “Save” button to save it.

Microsoft Edge Web Capture

 

▶ When saving is completed, the download completion screen will be displayed as shown in the figure.

Click the folder icon pointed to by the arrow to see the saved file.

Microsoft Edge Web Capture

 

 

⑦ Dedicated app “BrowseShot”

Cute lady

This app is available on the Mac App Store.

‎BrowseShot
‎*** Now FREE!!! *** Capture full-length PNG screenshots of any website. BrowseShot lets you capture a PNG of the full scrollable area of a website. Importan...

I will briefly explain how to use the app.

Enter the URL in the address bar and click the camera icon in the upper right to take a screenshot.

アプリ「ScreenShot」の画面

 

Take a screenshot of the entire portrait screen of a non-web app

I searched online, but couldn’t find a free app.

For a fee, the following apps are $ 29 and have a 30-day money-back guarantee.

CleanShot X for Mac
Capture your Mac’s screen like a pro.

The following app is available on the Mac App Store, but there is no trial period and that is expensive at $ 26.99.

‎Capto: Screen Capture & Record
‎Capto is a new screen capture, screen recording and editing app suite that’s perfect for creating informative and compelling captures. Instantly record a vide...

 

Reference information

10 Ways to Screenshot Entire Webpage on Mac or Windows
Do you want to take a full page screenshot, or scrolling screenshot on Mac? Check out some of these methods with detailed steps.
【Mac】SafariでWebページ全体のスクリーンショットを撮影する方法
Webページ全体を画像としてキャプチャする必要がある場合、macOSのスクリーンショットではすべてのコンテンツをスクロールしてキャプチャできないため、Webページ全体のキャプチャが難しい場合があります しかし、さまざまなテクニックを使用すると、web ページの全体の内容を取得できます Safariには、隠された機能があ...
Take screenshots on Firefox | Firefox Help
Screenshots is a tool in Firefox that allows you to save an image of all or parts of a web page.

 

This is the end of the article on this page.

 

コメント

タイトルとURLをコピーしました