CodeDigest.Com Logo
Featured:

How to Take Screen Shot of Scrolling Full Web Page in Google Chrome and FireFox Browsers?

Tagged as: General HowTo Posted By

This is a simple to do article which will help you to take screenshot of a full webpage that has vertical scroll. Using Print Screen button in Windows keyboard will help you to take a screenshot of whatever is just seen on the screen and it does not include the web page section that is only screen after doing a vertical scroll in a lengthy web page. Let’s see this how to do in 2 of major web browsers Google Chrome and Mozilla Firefox.

Full WebPage Screenshot in Google Chrome

  1. Visit the web page in Google Chrome.

  2. Press F12 to bring the web developer toolbar. This will bring the web developer toolbar docked in the bottom of the window or right side of the window. Refer the below image, developer toolbar is marked with blue box.

Note - You can also use More Tools> Developer Toolbars menu to enable the developer toolbar.

  1. Click Toggle device too “Toggle device toolbar” seen on the left top corner of toolbar or press Ctrl+Shift+M to change the webpage display. Refer the below image, the icon in marked in blue box.

  1. Click the vertical dots seen at the top right corner of the chrome browser window to expand the menu. Click “Capture full size screenshot” to get the screenshot saved in png format.

 

 

Full Webpage Screenshot in Mozilla FireFox Browser

In Firfox, we can take screenshot using various free firefox plugins. Here, we will use on of the most widely used plugin called FireShot.

  1. Visit the fireshot plugin page https://addons.mozilla.org/en-US/firefox/addon/fireshot/.

  2. Click “+ Add to Firefox” button as seen below.

  1. This will download the plugin. Click Install button once download completes. Click “Restart Now” once installation completes to restart firfox.

  1. Visit the webpage you need to take screenshot. You will see the fireshot icon [S] on top right corner of the firefox window. Click the menu and select Capture Entire page and .. > Select Save. The screen shot will be taken and will ask you to save it in a folder.

 

Fireshot plugin allows to edit, save as pdf, etc. as seen in the above image.



Feedback

Comments

Add Pikwy
I think you can add https://pikwy.com as a free online service for capturing screenshots
Commented by Denis on 9/15/2020 9:54:53 AM

Horizontal Scrolling Page screenshot
Please provide information how to take screenshot of a horizontal scrollable screen in one page.
Commented by Prit on 8/2/2020 8:46:36 PM

Thanks
It helps me a lot
Commented by anonymus on 9/26/2019 12:48:34 PM

Tip for Chrome
After step 3 in the How To with Chrome, you can set the resolution to whatever you want. I needed to print a long scrolling frame so set the resolution to 1000x3000. Worked like a charm. Cheers
Commented by Bob Fossil on 10/9/2017 11:00:21 PM