Breaking

Monday, 3 July 2017

How to Take a Screenshot of a Whole Webpage in Chrome & Firefox

Have you ever needed to take a screenshot of an entire webpage, but you could only capture the visible screen? This post will show you how to use Developer tools in browsers to take the screenshot of a whole webpage.

Screenshots can be very useful for blogs, presentations, and customer care, etc. It is quite easy to take screenshots of the visible area, but there aren't many ways to take screenshots of a whole webpage. Typically, most people use extensions to do the task, however, it is also possible to take a full screenshot without using any third party extension or plugin.

If you don't trust browser extensions then you can use Developer Tools in Chrome and Firefox to do the same.

Chrome: You can use Responsive Design Mode in chrome to capture the whole webpage. Follow the following simple steps to see how to do it:
  • Go to the page you wish to capture.
  • Launch Developer Tools by pressing F12 button or navigate to Menu > More Tools > Developer tools.
  • Press CTRL+SHIFT+M simultaneously to go to the device toolbar.
  • Click on the "More options" button from the top right corner of the screen.
Take a Screenshot of a Whole Webpage in Chrome
  • Click on the "Capture full size screenshot" option.
  • Done!
Firefox: It is also possible in Firefox but, at first, you'll need to enable "Take a screenshot of the entire page" option from the Developer Toolbar setting.
  • Launch Firefox.
  • Open the webpage and launch Developer Tools by pressing F12 button or alternatively you can open the DevTools via Menu > Developer > Toggle Tools.
  • Click on the "Toolbox Options" button and scroll down to "Available Toolbox Buttons" section.
Take a Screenshot of a Whole Webpage in Firefox
  • Turn on the "Take a screenshot of the entire page" option.
  • That's it! Now you can click on this button in the Developer Tools to get the full page screenshot.
Tip: Adjust the responsive view to take the screenshot of the mobile version of the webpage in chrome.

No comments:

Post a Comment