Capture scrolling web page using Chrome

Introduction

This tutorial will show you how to capture scrolling web page using Chrome browser’s built-in features. Generally we use PrtSc button on keyboard or Snipping Tool that comes with Windows operating system for capturing screenshot of the web page or screen. But these tools have limitation and you cannot capture beyond the size of visible screen size. So you have to take multiple screenshots by breaking into several parts.

Therefore we will use Google’s Chrome browser to capture the entire web page that goes beyond its visible screen size.

The Chrome browser can be used to capture only web pages that are opened with Chrome browser.

Limitation

Prerequisites

Google’s Chrome Browser

Example

Please go through the following steps in order to capture scrolling web page using Chrome.

Make the Page Active

Make sure you open the web page for which you want to take screenshot in Chrome browser.

Opening Chrome’s Developer Menu

Open Chrome’s developer menu by pressing the key combinations from your keyboard according to your operating system.

Windows/Linux

Press Ctrl+Shift+I from keyboard. Press again Ctrl+Shift+P from keyboard.

Macintosh

Press Alt+Command+I from keyboard. Press again Command+Shift+P from keyboard.

Capturing Screenshot

Once Chrome’s developer menu is opened by pressing the keyboard shortcuts, you need to type screenshot to select what kind of screenshot you want.

Now once you select the appropriate option from a list of screenshot options, Chrome will either save the screenshot in Downloads folder or ask you to save the screenshot at your chosen location depending on your browser’s setting for downloaded files.

Testing

I will show you how it happens on Windows operating system.

Let’s say the URL https://www.roytuts.com/ has scroll and we cannot capture the whole web page using keyboard’s PrtSc or Snipping Tool at once. So we press Ctrl+Shift+I and Ctrl+Shift+P. Then we get the following page:

capture scrolling web page using chrome

Now we have got the developer menu on right side. Now type screenshot as highlighted in the below image:

capture scrolling page using chrome

Now you have got four options for what kind of screenshot you want. Select the option Capture full size screenshot. You can also choose other option as per your needs.

Now it will ask you for saving the downloaded file or save the file under Downloads folder automatically as per your Chrome’s settings for file saving option.

You can choose where to save your image and what type of image it should be, such as, png, jpg/jpeg, bmp etc.

capture scrolling web page using chrome

Now when you check you will get the whole web page as an image.

capture scrolling web page using chrome

That’s all. Thanks for reading.

Capture scrolling web page using Chrome

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top