How to Screenshot an Entire Webpage

Casey Roche
Last updated August 11, 2023

There are many ways to take a screenshot on your computer, whether using built-in screenshot functions from your operating system or screen capture programs. While you can usually screenshot everything visible on the screen or a section of the screen, you may need to know how to screenshot an entire webpage.

When screen capturing the entire webpage, the image will include all the content on the page, including the areas that are only visible when you scroll down the page. In other words, it takes a scrolling screenshot to include everything rather than just the visible content that fits on your screen.

There are various ways you can take a screenshot of the whole webpage. You can use our tool in any browser and device, or you can use different methods based on the browser you are working in.

Make the Full Page Screenshot Online Using Our Tool

This method of taking a full-page screenshot works on any browser and is as simple as copying and pasting a URL and adjusting a few settings. You can save the screenshot as a PNG or JPG. 

Our full-page screenshot tool doesn’t access your server or require any personal information from you, and it’s completely free to use anytime you need it. Your screenshot is not stored on our servers and is automatically deleted two weeks after you generate it.

To use the tool, first, open the app in your browser by clicking on this link. You will see a description of the tool and a section where you can change various settings based on your desired outcome.

Next, open the page you want to screenshot in a separate tab. I will use one of the blog posts for this guide. Once the page is open in your browser, scroll through the entire page and ensure that all the images have loaded before moving on.

Then, double-click on the URL near the top of the screen to select it.

Next, right-click and select Copy or use the shortcut Control + C on Windows or Command + C on Mac to copy the URL of the page you want to screenshot.

Once the URL is copied to your clipboard, open the screenshot tool tab. Then paste the URL into the URL box by clicking inside, right-clicking, and selecting Paste. You can also use the shortcut Control + V on Windows or Command + V on Mac.

Next, select the Browser Size that matches your device from the drop-down menu, and be sure to turn on the Full Height button.

If you'd like, you can also set a custom width by typing a new amount into the Width box.

The last setting to change is the File Format type. Using the File Format drop-down menu, you can set the output file to be PNG or JPG.

Once you have adjusted the settings as needed, click on Submit to allow the tool to generate the full-page screenshot.

After a few moments, you can scroll down the page to view a preview of the screenshot. You will see that the entire webpage was captured. If you are happy with the result, click on Download Image.

You can then name the screenshot and find a place to save it using your Explorer or Finder window, depending on your operating system.

You will now have the full-page screenshot in your files, ready to use as needed. You may need to zoom in to view the image clearly and scroll to see the rest of the screenshot.

Full Page Screenshot on Chrome

If you don’t want to use a third-party app or tool, there are often ways to create a screenshot using a built-in function in the browser. Here is how to take a full-page screenshot using the native function in Chrome. The process may seem complex, but it is simple if you follow these steps.

To take the screenshot, open the webpage you want to capture and then open Chrome’s Developer Tools. To open the developer tools, click on the menu in the top-right corner of Chrome, which looks like three dots. Then, go to More Tools > Developer Tools. You can also use the shortcut Shift + Control + I on Windows or Shift + Command + I on Mac.

The Developer Tools panel will open on the right-hand side of the screen and may look confusing at first. Don’t be discouraged, the process is simple, and there are two ways to screenshot the page.

Use the Run Function

The first method uses the Run function to access the screenshot options. To access the Run function, use the shortcut Shift + Control + P on Windows or Shift + Command + P on Mac. The run bar will open at the top of the Developer Tools panel.

Type screenshot in the command section of the bar, and you will see the screenshot options appear.

Click on the screenshot button next to the Capture Full Size Screenshot option.

Your Finder or Explorer will open, allowing you to add a name, select a save location, and save the screenshot in PNG format.

Use the Device Toolbar Method

The second method uses the Device Toolbar Method, which offers a few more options, such as setting the screenshot to a custom size. To access the Device Toolbar, click on the icon at the top left of the Developer Tools panel.

You can now set the dimensions to responsive, then set the custom size you’d like the screenshot to be.

When you are ready to take the screenshot, click on the three dots to the right of the Device Toolbar and select Capture Full Size Screenshot.

You can then set a name, save location, and save the screenshot using the Explorer or Finder.

Full Page Screenshot on Firefox

Suppose you are on the Mozilla Firefox browser. You can use the built-in function to take a full-screen screenshot. However, the screenshot function may be hidden, but it’s easy to find and add to your toolbar.

To access the screenshot function, right-click on the browser’s toolbar and select Customize Toolbar.

You can also access the Customize function by clicking on the menu at the right of the toolbar, then selecting More Tools.

In the More Tools menu, click on Customize Toolbar.

In the Customize panel, you will find several tools you can add to the toolbar. Find the Screenshot option in the panel.

Click on Screenshot, then drag and drop it onto the toolbar to add the shortcut.

Next, open the page you want to screenshot in a tab, then click on the screenshot icon in the toolbar.

The screenshot function gives you two options. You can choose to save the visible area or the full page. Click on Save Full Page.

A window will appear showing a preview of the screenshot that you can scroll through to view. Click Download in the top right corner to save the screenshot as a PNG.

Note: You can set a custom area to screenshot by not selecting any option and simply clicking and dragging across the page to capture a portion of the page. You can drag the mouse down the page to capture more than the visible area.

Full Page Screenshot on Edge

Microsoft Edge offers a built-in screen capture tool with editing capabilities. While you can use the same method as Chrome by going into the Developer Tools, the built-in tool provides more customization options.

To screenshot a full page in Edge, open the page you want to screenshot. Scroll through the entire page to let all the images load before you move on to screenshot the page.

Then click on the three-dot menu in the top right corner and select Web Capture. You can also use the shortcut Shift + Control + S on Windows or Shift + Command + S on Mac.

Next, use the options at the top to select Capture Full Page to ensure the screenshot is not limited to the visible area.

The screenshot window will open, allowing you to scroll and view the webpage and edit the screenshot using the Draw and Erase tools at the top. When you are ready, click the Save icon on the top right-hand corner to save the full-page screenshot.

The screenshot will save as a JPEG to your default save location, which is likely the Downloads folder.