How to Take a Full Page Screenshot in Chrome, Safari, Edge & Firefox

Tell me if this sounds familiar: you need to take a screenshot of a whole web page (or, at least, more than one small part of it), so a drag-and-snap screenshot is out. You also need to capture info "below the fold" (content that's only visible after you scroll), so that's another no to your usual screenshot method.

So how can you avoid the painful task of scrolling down a page at a time, capturing one window screenshot again and again, and then cobbling it all together at the end?

Well, you could use a screenshot app or a browser extension, but many of these won't help you with full page screenshots (or will be just as long and painful as the first method).

Instead, try one of Google Chrome's hidden gems: the built-in, full page screenshot tool.

How to Take a Full Page Screenshot on Chrome

Here's the short version of how to take a full page screenshot on Chrome:

1. With the web page open, press Command + Option + I (on Mac) or Ctrl + Shift + I (on Windows).
2. Then, press Command + Shift + P (on Mac) or Ctrl + Shift + P (on Windows).
3. In the search bar, immediately after the word "Run >", type "screenshot."
4. Select "Capture full size screenshot", and Chrome will automatically save a full page screenshot to your Downloads folder.

Detailed Chrome Screenshot Process

Google has to know that people are mishmashing screenshots together, so it's a real mystery why their built-in screenshot tool is hidden. But now that you know about it, check out how simple it is to get a full page screenshot using a few keyboard shortcuts.

Step 1: Open Developer Tools

With the web page open, press Command + Option + I (on Mac) or Ctrl + Shift + I (on Windows) to open Developer Tools. You can also do this by clicking the menu on your Chrome toolbar (⋮), then selecting More Tools > Developer Tools.

Step 2: Open Command Menu

Next, press Command + Shift + P (on Mac) or Ctrl + Shift + P (on Windows). This will open Chrome's developer menu.

Step 3: Search for Screenshot

In the search bar, immediately after "Run >", type "screenshot" for your command.

Step 4: Capture Full Screenshot

Select "Capture full size screenshot" from the options that appear.

You can now find your full page screenshot in your Downloads folder.

How to Take a Full Page Screenshot in Chrome with Custom Dimensions

The keyboard shortcut method is a great way to quickly capture a full page screenshot, but if you want to customize the size of your screenshot, you'll have to take a few more steps to get it.

1. Open developer tools in Chrome using the keyboard shortcut from before: Command + Option + I (on Mac) or Ctrl + Shift + I (on Windows).
2. Click the device toolbar, which looks like a phone on top of a tablet (or two rectangles overlapping), from the menu bar. This will open a responsive version of the web page.
3. Enter the custom width and height of your screenshot in the dimensions bar found directly above the responsive view of the web page. Alternatively, you can change the view using the dropdown menu (by default, this is set to Responsive) or by adjusting the zoom level.
4. Click the menu (⋮) in the dimensions bar, and select "Capture full size screenshot".

Chrome will automatically download the full page. From there, you can crop your image or add some pizazz.

How to Take a Full Page Screenshot Using Other Browsers

If you want to screenshot an entire webpage not in Chrome, here's how to do it in other popular web browsers.

Arc Browser

1. With the web page open, enter Command + T.
2. In the search bar that appears, enter "capture full page," and click "Capture Full Page" from the list of options that appear.

By default, the image will be stored in the Media folder of your Arc Library.

Brave Browser

If you're a Brave user, I have good news: the steps to take a full page screenshot are the exact same as doing it in Chrome. Similar to Chrome, your images are automatically saved locally in your Downloads folder.

Microsoft Edge

1. With the web page open, press Command + Shift + S (on Mac) or Ctrl + Shift + S (on Windows).
2. Click "Capture full page".
3. Click the Save icon, which looks like a floppy disk.

The file will automatically save locally in your Downloads folder.

Firefox

1. Right-click the webpage you want to capture, and select "Take Screenshot".
2. Click "Save full page".
3. In the screenshot preview that appears, click "Download".

Firefox will save the screenshot in your Downloads folder.

Safari

Before you can take a full page screenshot in Safari, be sure the Develop menu is visible in your Safari menu bar. If that's not the case for you, here's how to change that:

1. With Safari open, click Safari in the menu bar, and then select Settings. Or use your keyboard shortcut: Command + ,.
2. In the Advanced window, click "Advanced".
3. Click the checkbox next to "Show features for web developers".

Now that you've made your developer tools visible, you can take a full page screenshot:

1. With the web page open, click "Develop" in the menu bar, and then select "Show Web Inspector". Alternatively, you can use your keyboard shortcut: Option + Command + I.
2. By default, the developer tool should open with the Elements tab visible. If not, click "Elements".
3. Right-click the line of code that begins with <html (you may have to scroll to the top of your elements log).
4. Click "Capture Screenshot".
5. Choose where to save the file.

Pro Tips for Better Screenshots

• Clear your browser cache before taking screenshots to ensure you're capturing the latest version of the page.
• Disable browser extensions that might interfere with the page layout or add unwanted elements.
• Use incognito/private mode to avoid personalized content that might not be relevant for your screenshot.
• Check the page on different screen sizes using the responsive design mode in developer tools.
• Consider the file format - PNG is best for screenshots with text, while JPEG might be better for image-heavy pages.

When to Use Full Page Screenshots

Full page screenshots are particularly useful for:

• Documentation - Capturing complete web pages for training materials or guides
• Design reviews - Showing the complete layout and flow of a website
• Bug reports - Providing developers with the full context of an issue
• Content archiving - Saving important web content for future reference
• Social media - Sharing complete articles or pages on platforms like Twitter
• Client presentations - Showing the full scope of a website redesign

Alternative Tools for Advanced Screenshots

While browser tools work great for most cases, here are some professional alternatives:

• Loom - For screen recordings with voice-over
• Snagit - Professional screenshot and screen recording software
• Lightshot - Browser extension for quick annotations
• Greenshot - Free screenshot tool for Windows
• Skitch - Evernote's annotation tool (Mac)