Screen Capture Entire Web Pages On Your Mac (2023)

Hi, this is Gary at MacMost.com. Let me show you how you can take a screenshot of an entire webpage, not just the visible part, on your Mac. 

MacMost is brought to you thanks to a great group of more than 1000 supporters. Go to MacMost.com/patreon. There you can read more about the Patreon Campaign. Join us and get exclusive content and course discounts.. 

So it is easy to take a screenshot on your Mac but it only captures what is actually on the screen. If you were browsing a webpage and you wanted to capture the entire page, not just the visible part, it's a little more difficult to do. There are some third party apps that can do this but what if you just wanted to do it using your browser. Let's take a look at Safari, Chrome, and Firefox and how to do it in each and how well it works. 

First let's look at Safari. Let's talk about what you really need from the screen capture. If you just want to capture all the contents of a webpage, maybe to view them off-line later, then you may not need a screenshot at all. For instance, here on this long Wikipedia page you can go to File, and then to Export as PDF. Then create a PDF from the webpage. We can take a look at the PDF here and it looks pretty good. You can scroll through it and it's got everything. Another way to do this with a preview is go to go to File and then Print. Then you can go and click the PDF button here at the bottom and it will save this out to the same location. Then when you look at this you can see it looks a little different than when you look at this. One is actually exporting the page as you see it. The other one is actually printing it using the Page's built-in Style sheet for printing and then it is simply saving that as a PDF instead of sending it to your printer. How well either of these work really depends on the webpage and how it is built. This first one here is just one super long PDF page. So I can open it up in Preview here and then go to Export and export that as an image. Let's export it as a png and now I've got a large image version of the webpage. Note the image version is fairly large, 4 megs, whereas the PDF version is much smaller because it includes the actual text and is rendering it as a PDF. Whereas the png is actually pixels. 

Now there is another way to get a full page screenshot from Safari, but results will vary. Let's go to Safari, Settings, and then go to Advanced, and then click Show Develop Menu in Menu Bar. This gives you some advanced functionality. So now when you go into a page you can go to Develop, Show Web Inspector or just Option Command i, and you may need to restart Safari before you use this the first time. So you bring up the Inspector and it's all these developer tools here. If you look on the left you should see all the html. Put your pointer right over the very first thing here where it says html and Control click it to bring up the Context Menu. Then go to Capture Screenshot. What this should do is capture the entire page as a screenshot and save it to a file. If I select it it will take a moment to actually build the screenshot. Then it will ask me to Save it. Then I'll save it and I end up with this png file. Now this webpage is a really good example of when it doesn't work! If you click on it here and use Quick Look you'll see nothing but the icon. If I double-click on it in Preview it says it can't be opened. There's something wrong with the file. So Safari failed to actually create a valid screenshot. 

However, other webpages will work. I use Option Command i here on My Home Page and Control click right where it says html. Then do Capture Screenshot and then Save it. In this case you can see right here in Quick Look it actually did save the page and it looks good. 

Now let's go over to Chrome. In Chrome you could also go to File and then Print and you see no special print button here. Chrome has a special window for printing. But you can preview it. Then if you go to More Settings and click on that and scroll down you'll see Print using the System Dialogue. Then you can go to PDF or you can go to Open PDF in Preview and you'll get a PDF using the printing style sheet for that webpage. But you could also use that same developer tools technique here. If you go to View and then Developer you can go to Developer Tools. This same Option Command i. So now while there is a Capture node screenshot here if you Control click on html element, that's not what you want to use. You'll just see the visible area then. You have to click on the vertical three dots here on the right. Then you need to do a Run Command or Command Shift P. Then you search for Screenshot and there are several different screenshot options here. You can then use Capture Full Size Screenshot if you like and you should get a full screenshot. It will take a minute to load up and then you'll see it appear here in the Downloads area. It doesn't ask you where to save it. So we can show it in the Finder. There it is. If I look at it in Quick Look I've got a full screenshot of the entire thing, saved  as a png. You can click on the Settings tool here and then go to Shortcuts and then scroll down until you find the Screenshot Section. It's all the way down here alphabetically. You can assign a keyboard shortcut to capture full-size screenshot and this helps if you need to use it a lot. 

Finally, we have Firefox. So Firefox turns out to be the hero here because you don't need to use any of those developer tools or anything like that. There's built-in full page screenshot functionality inside of Firefox. So even if you don't use Firefox at all you can certainly download it and use it when you need to actually capture a full-size screenshot. In fact this is what I do. This is my primary use for Firefox right now. So it is a little hard to figure out where the screenshot capability is. There used to be a button up here where you can access it. But now you have to Control Click, right click or two-finger click on a trackpad, on a blank area of the page. If you do that you'll get Take Screenshot. When you use that you'll see the Option up here to Save Just Visible or Save Full Page. If you say Save Full Page it will take a moment to compose it. It will show you the screenshot and you can Copy or Download and it will put it in your Downloads Folder. You can see it here and it looks good. If you want to use this more often go to View and then Toolbars and Customize Toolbar. You can take the Screenshot button, move it up here to the top, I'll put it right up here on the right, and now you can simply click this button to go right to the Screenshot Tool and select Save Full Page. 

So there are different ways to do it in different browsers. Remember there's nothing wrong with having more than one browser on your Mac. You can still use Safari all the time, like I do, and then have Firefox there to use for the screenshot capability. Or you can just try doing it in Safari and if you occasionally run into a problem with the Safari Developer Tool method then you can have Firefox there as your backup. 

I hope you found this useful. Thanks for watching.