It can be quite useful to get a “full page” screenshot in a browser. That is, not just the visible area. The visible area is pretty easy to get just by screenshotting the screen. A full page screenshot captures the entire web site even if it needs to be scrolled around to see all of it. You could take individual screenshots of the visible area and use a photo editing program to stitch them together, but that’s a pain in the but. Nevermind the fact that it’s extra tricky with things like fixed position elements.
Fortunately browsers can help us out a bit here.
Chrome
As of Chrome 59, it’s built into DevTools. Here’s a video. You use “Responsive Design Mode”, then the menu option to get the full page screenshot is in the menu in the upper right.
If you need a “mobile” full length screenshot, just adjust the responsive view to the size you want and save again. Handy!
I’ve also had good luck with the Nimbus extension in Chrome.
Firefox
There is a setting in the Firefox DevTools that you need to turn on called Take a screenshot of the entire page under Available Toolbox Buttons. Flip that on, and you get a button.
Safari
Safari has File > Export as PDF, but it’s pretty awkward. I have no idea how it decides what to export and what not to, the layout is weird, and it’s broken into multiple pages for some reason.
The Awesome Screenshot extension seems to do the trick.
There are also some native apps like BrowseShot and Paparazzi!
Full Page Screenshots in Browsers is a post from CSS-Tricks
