The ability for users to capture images of their computer’s screen content, commonly referred to as “screenshots”, certainly isn’t revolutionary technical news for mid 2017. Unfortunately, conventional screenshots only capture the content of the page that is visible on the monitor at the current time. This is fine if you only want to copy a small section of screen content. But if I had a dollar for the number of times that I wanted my screenshot to include more content than what was currently viewable in the browser window, I might be independently wealthy. What a novel idea it would be to have the ability to capture an entire web page, regardless of it’s length, in one shot. Thankfully this feature is a reality in several of the major browsers and it is available right out of the box…although to enable the functionality you might have to dig a little into the box as it is buried in the developer tools of those browsers. But if you are equal to the task, then read on or watch our tutorial video.
Google Chrome
Its important to note that the “Capture full size screenshot” feature was introduced to Chrome in version 59, so you may have to update your version of Chrome to take advantage of the following information. First, launch Chrome and navigate to a webpage that you wish to capture. Activate Chrome’s developer tools by selecting “More Tools > Developer Tools” within the Chrome menu. In the developer tools frame, locate and select the “Toggle device toolbar” icon and be sure that the device mode is set to “Responsive”. Now, simply use the vertical handle, on the right side of the web page display, to set your desired viewport width. Finally, select “Capture full size screenshot” under the “More options” menu, in the top right corner of the device toolbar frame. A PNG screen capture will be sent to your download folder momentarily. In conclusion to this section, and as an aside, it’s important to note that if you prefer using the Opera browser, you can simply follow the Google Chrome process for capturing full viewport screenshots as Opera browser currently appears to offer the same developer tools interface as Google Chrome (note that I am using Opera version 46).
Firefox
Like Google Chrome, Mozilla has chosen to bury the “screenshot the entire page” functionality within Firefox’s own developer tools interface, but Firefox does succeed in making the process a little more straightforward. But only just a little. After launching Firefox and navigating to the web page that you have chosen to capture, you need to enable the Firefox developer tools. This is achieved by selecting the “Developer” icon that is found within the Firefox menu and then selecting the “Toggle Tools” option. In the developer tools frame, locate and select the “Toolbox Options” (gear) icon which will present you with a window of preference checkboxes. Locate and check the box labeled “Take a screenshot of the entire page”. Checking this box will add a new icon, that looks like an SLR camera, to the existing set of icons. Once you enable this new “Take a screen shot of the entire page” option, you will have it available for future browsing. Now, simply adjust the browser window to the width that you wish to capture and select the “Take a screen shot of the entire page” (camera) icon. A PNG screen capture image will be directed to your download folder in short order.
Other Browsers
Obviously, there are a number of other main stream web browsers that have not been covered by this article. Of specific note are Apple’s Safari, as well as Microsoft’s Internet Explorer and Edge. I don’t regularly utilize IE or Edge (outside of standard browser testing practices) so I won’t comment on their abilities in regard to this matter. Safari, on the other hand does have the ability to capture full viewport screenshots through the use of third party browser extensions such as the “Awesome Screenshot” extension.