How to screenshot an entire webpage

Reading Time: 3 minutes

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!

Full page screenshots.

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:

Chrome device toolbar.

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:

Full page screenshot option.

 

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

Firefox Developer.

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.

Firefox screenshot options.

5> Now you will have a camera icon in the toolbar to take a screenshot of the entire page as shown here:

Camera icon in Firefox.

I hope you find this as useful as I now do!

Simon Day

Simon has been building websites since 1997 and has worked on several multi-million pound projects. You can say hi on Twitter and maybe Linkedin also.

Leave a Reply

Your email address will not be published. Required fields are marked *