How to take screenshots (and scrolling screenshots) of webpages

Web page screenshot: Detailed explanation of screenshot methods for different browsers

Do you need to save or share web content? This article will guide you how to efficiently use different browsers to take screenshots of web pages, including full-screen and partial screenshots. Unlike ordinary screenshots, web page screenshots require removing interface elements such as browser toolbars and menus, and only retaining the web page content itself.

Google Chrome browser

The built-in screenshot function of the desktop version of Chrome browser is hidden in the developer tools. After opening the landing page, press Ctrl Shift I (Windows) or Cmd Option I (macOS) to open the Developer Tools panel. Then:

1. Click on the three dots in the upper right corner of the Developer Tools panel.
2. Select "Run Command".
3. Enter "screenshot" to bring up the screenshot option.
4. Click "Capture full-size screenshots" to capture the entire page.
5. Click "Capture Screenshot" to capture the visible area of ​​the page.

The save dialog box will pop up later, and you can choose where to save the screenshot. If you find the built-in options too cumbersome, many third-party screenshot tools to choose from, such as Webpage Screenshot and GoFullPage, are both very popular free tools and offer a variety of options (the former is more powerful and the latter is more concise).

For mobile devices, the Android version of Chrome has built-in screenshot function, but the iOS version of Chrome needs to rely on the system's own screenshot method. In Android system, open the landing page, click on the three dots in the upper right corner, select "Share", and then select "Long Screenshot".

Apple Safari Browser

Similar to Chrome, the screenshot tool for the macOS version of Safari browser is also hidden in the developer options, and they need to be enabled first: select Safari > Settings> Advanced and check "Show web developers" Functions check box. After enabling this feature:

1. Open the Development menu and select Show Web Inspector.
2. If it is not already open, switch to the Elements tab.
3. Right-click the first line of the code (starting with the HTML tag).
4. Select "Capture Screenshot" from the pop-up menu.

You will see a save dialog box where you can choose where to save the screenshot. This will be a full scrolling screenshot containing the entire page – there is no option to save only visible parts.

We don't know what high-quality screenshot extensions are available for Safari browser on macOS. Safari for iOS also doesn't offer this feature - but you can scroll through the usual way, which will capture the entire page.

Microsoft Edge browser

The desktop version of Edge browser integrates a screenshot tool, so taking screenshots is not difficult. After opening the landing page, click on the three dots in the upper right corner and select "Screenshot".

You will then see three options appear at the top of the page: Capture Area (Capture part of the page by dragging the rectangle selection), Capture Screen Area (Capture content on the current screen) or Capture All page” (capture the entire page).

Your screenshot will appear in a separate window: if needed, you can annotate the screenshots using the simple pen tool. In the upper right corner of the window, you can find the icon to copy the screenshot to the system clipboard or save it to disk.

Edge browser is based on the same code base as Chrome, so if you need features that are not available in built-in tools, you can access the same extension. Similarly, Webpage Screenshot and GoFullPage are worth a look.

On mobile, Edge follows Chrome's template: In Android, you can find the screenshot tool by clicking the menu button (three lines in the lower right corner) and selecting "Share" and "Scroll Screenshot". In iOS, you need to rely on methods built into the system software.

Mozilla Firefox browser

Firefox desktop version also comes with a screenshot tool. Right-click the web page you are viewing and select “Search Screenshot”.

You will then have three options: You can click and drag an area on the page, or you can click the "Save visible area" or "Save full page" button in the upper right corner. You will get a preview window and the option to "Copy" or "Download" the image.

Of course, Firefox is one of the best browsers because it supports extensions. If the integration options don't meet your needs, you can use add-ons such as Easy Screenshot, Lightshot, and Awesome Screenshot. They are all highly rated and have an intuitive and simple interface.

As for mobile apps, neither Android nor iOS Firefox has built-in screenshot functionality, so you need to stick to the standard screenshot options. On Android, though, you can save the page as a PDF: Click on the three dots in the upper right corner, then click on the share icon at the top, and select "Save as PDF".

The above is the detailed content of How to take screenshots (and scrolling screenshots) of webpages. For more information, please follow other related articles on the PHP Chinese website!