How to take a full page screenshot in Safari for Mac 100% plugin-free

Full page screenshot in Safari for Mac

Capture screenshot: Best friend to UX user experience designer

You’re a conducting a competitor audit. You want to take a full page screenshot of your competitor’s brand new campaign. You have 13 direct competitors. They each launch a new campaign every week. They each have a desktop, tablet and mobile website. Sure, it’s responsive, but they each look totally different. That’s 2,028 screenshots per year. Do yourself a favour—check out this tutorial. In this walkthrough, we’ll learn how to take a full page screenshot in Safari for Mac. Better yet, it doesn’t require a plugin or extension—excellent!

Open Safari for Mac

Open Safari for Mac and open an interesting website. I recommend Hassle Design. For this tutorial, I’ve chosen the Adobe UK website.

Look at the Safari menu bar. See the Develop menu? No? Follow the next step.

Open Safari for Mac

Enable Develop menu

Click Safari, then Preferences (⌘,). Open the Advanced tab. Then, check Show Develop menu in menu bar. This will enable Develop mode.

Show Develop menu in menu bar

Inspect Element

With Develop enabled, right-click the browser window. There, you’ll see Inspect Element. You’ll see several new tabs. Click the Elements tab.

Scroll to the top of the Elements window. There, you’ll find a purple HTML tab.

Inspect Element

Capture screenshot

Right-click the purple HTML tab. You’ll see an option to Capture Screenshot. Click Capture Screenshot to take your full page screenshot. Save the screenshot.

Capture Screenshot

Responsive full page screenshot

Now, the Develop menu is super useful. I use Responsive Design Mode on a daily basis—to check out mobile and tablet websites in Safari for Mac. Click Develop, then Enter Responsive Design Mode.

I’ll cover Responsive Design Mode in a future tutorial. For now, we’re interested in screenshotting our mobile website.

Click iPhone 8 to preview our website in a mobile format.

Enter Responsive Design Mode

Inspect Element

As before, open Inspect Element and find the purple HTML tag. Like before, click Capture Screenshot.

iPhone 8 Capture Screenshot

…and Save

Save the high-resolution mobile screenshot.

Need more content? Why not learn how to compress Adobe Illustrator files with Create PDF Compatible File. Still don’t have an Adobe Creative Cloud subscription? Click here to make an account.

Full page screenshot in Safari for Mac