In this tutorial, we will show you how to take a screenshot of a full web page in Safari, Chrome, and Firefox on your Mac using built-in and third-party methods.
Important: Most websites use the lazy-loading feature, which loads the image only after you scroll to that point on the page. So, before following the steps below, load the web page completely and scroll to its bottom to ensure all images are also visible. After that, take a full-page screenshot (also known as a scrolling screenshot).
Also see: How to take a full-page screenshot in any iPhone app
Screenshot an entire web page using built-in browser tools
Safari
To accomplish this in Safari, you’ll need to display the Develop tab in the menu bar. If you already have it, you’re a step ahead. If you don’t, follow these steps first.
- Open Safari and click Safari > Settings or Preferences from the menu bar.
- Go to the Advanced tab.
- Check the box for Show features for web developers or Show Develop menu in menu bar.
Now, head to the web page you want to capture and follow these steps.
1) Click Develop > Show Web Inspector from the menu bar. The Inspector will open with the webpage on either the right or the bottom, depending on the default position. This displays the HTML code for the page.
2) Go to the top of the code in the Elements tab and right-click the first line beginning with “html.”
3) Select Capture Screenshot from the shortcut menu. It can take several seconds before you see the screen in the next step, so be patient.
4) Choose a location to save the image and optionally rename it.
5) Hit Save.
You can then open the saved image in Preview or your Mac photo editor to see it in full.
To close the Web Inspector in Safari after you capture the shot, just click the X on the top left corner of the panel.
Firefox
Firefox users will be happy to know that this browser provides the easiest option for capturing a scrolling screenshot.
1) Head to the page you want to capture. Now, right-click on the page and choose Take a Screenshot.
2) Click Save full page on the top right.
3) Hit Download to save the image or Copy to place it on your clipboard to paste where needed.
And that’s all there is to it! After you choose to Download or Copy the image, the webpage will go back to its original view.
Google Chrome
1) Visit the webpage you want to capture and click the Customize and Control button (three dots) on the top right.
2) Move down to More Tools and pick Developer Tools in the pop-out menu.
3) When the panel opens on the right of the webpage, click the Toggle Device Toolbar button at the top.
4) With your webpage on the left, you can choose to view it as a different device at the top or just leave as Responsive.
5) Click the three dots on the top right of the left-hand panel and select Capture full size screenshot in the menu.
The image will be downloaded for you to grab and open in whichever app you like. You can close the Developer Tools by clicking the X on the top right of that panel.
Use the Awesome Screenshot extension
You can use the excellent Awesome Screenshot extension to capture full-page screenshots inside any popular browser.
Start by getting the extension for Safari, Chrome, or Firefox. After that, click the extension icon and choose Capture Full Page > Done > Download.
Note: For Safari, you will have to first:
- Allow screen recording permission: Once the app is downloaded, open it and click Go to Screen Recording Setting. It will take you to System Settings > Privacy & Security > Screen & System Audio Recording. From here, enable the switch for Awesome Screenshot & Recorder and confirm. After that, click Quit & Reopen.
- Enable the extension: Go to Safari Settings > Extensions and check the box for Awesome Screenshot before its icon appears in the top left of the address bar.
On a related note: