Taking screenshots of certain parts, or even everything you see on the screen, has always been simple to do. Now though, we all have the ability to take a screenshot of an entire page, even when it’s off the screen!
Not many of us pay much attention to browser updates. The latest one from Chrome is well worth the read! One of the single biggest new features is taking a screenshot of an entire page, regardless of whether you can see it all on the page or not. As a web designer, constantly working on prototypes, this new feature is a godsend!
So I’m working on a redesign for a client. I have the page ready for a beta preview and I want to send it to him. Before I would be copy/pasting each part I can see on screen into a photoshop file. Time-consuming and dull.
In three clicks I can now do this instantly!
How to do this is still slightly cumbersome and it is easy to not see the link in Chrome. These are the steps you need to take.
1> Right click on page and choose ‘inspect’
2> Turn on the device toolbar located here:
3> Now you need to go to the top right of the page and click on the three little dots to bring up the full page screenshot, as shown here:
After clicking on the ‘capture full size screenshot, open your downloads folder and there you go, a ready to go, full page capture of your web page.
Chrome also made a video highlighting this and other recent updates which you can watch here:
Firefox can do the same
You can also do the same thing in FireFox…
1> Click on developer in the tools box
2> Click on the “Toggle Tools”
3> Click on the “cog” icon for ‘ToolBox Options’
4> Make sure the ‘Take a screenshot of the entire page’ is ticked.
5> Now you will have a camera icon in the toolbar to take a screenshot of the entire page as shown here:
I hope you find this as useful as I now do!