How to capture full-length screenshots of web pages using Safari for Mac
Getting a screenshot of the entire length of a web page can be useful for a variety of reasons, whether you’re creating a scrolling mockup for presentation purposes or you recently purchased a font bundle and want to capture the page that shows type specimens of your new treasure trove for future reference.
There’s always the tedious, manual way of doing this: taking a screenshot (shift-command-3), then scrolling down the page in your browser, and repeating the process until you’ve reached the bottom of a web page. Then, you’re likely off to Photoshop to stitch multiple screenshots together. While that method works, it’s not a good use of your time.
There are plenty of standalone apps and browser extensions that can assist with streamlining this process, like Awesome Screenshot, but you might not realize that your Mac’s built-in browser, Safari, has this capability already. You just need to take a few steps to activate it and shoot those screens to your heart’s content.
1. Turn on the Develop menu.
First, launch Safari, select Safari > Preferences from the menu, and go to the Advanced tab. Check the box next to Show Develop Menu in Menu Bar.
2. Browse to your web page of choice.
For this exercise, let’s visit espn.com. It’s got a pretty lengthy home page.
3. Start inspecting.
From the Develop menu, choose Show Web Inspector.
A panel will open at the bottom of your Safari window that might look intimidating, but you don’t need the skills of a developer to get what you need here.
4. Take your shot.
Make sure you’re on the Elements tab in the Web Inspector panel at the bottom of your Safari window. Hover your pointer over the <html> tag. You’ll see almost all of the web page content highlighted.
Control-click or right-click while hovering over the <html> tag. You’ll get a flyout menu, within which you can select Capture Screenshot.
5. Save your shot.
After a second or two, you’ll be prompted to select a location and a filename for your screenshot. Click Save when you’re ready.
6. Edit your shot.
Head to the location on your Mac where you saved the screenshot. Select it by clicking once with your mouse in the Finder, then hit your spacebar to preview it. Chances are, there are a lot of empty containers around the screen image that you’ll want to remove. Click the Edit button at the top right of the window.
From there, click the Crop tool at the top left.
Click and drag the corners of the marquee that appears to crop comfortably to the edges of your screenshot, then click Done at the top right.
You’ve now captured the full length of a web page without any additional software or tools.
Have any similar productivity tips to share? Let us know in the comments below.