How To Screenshot a Full Page

By May 4, 2016Creative

Being a Front End Developer you find yourself taking many screenshots/screen captures whether it is snippets of code or a mockup page you just built out. I previously used Mac’s built in screenshot ability but found myself struggling when I needed screenshots of full pages. The problem was that I needed full pages not just partial shots of a page. The Mac’s Screenshot functionality only works, in my opinion, if everything is within the window you want. Whether it is a small image or snippet of code, this is a great tool and I have also used it to create great step-by-step tutorials for clients. However, for capturing a full page, this tool will not work. How about when you want to capture a website in its entirety? This is when this great small Chrome extension comes into play; it is called “Full Page Screen Capture” by mrcoles.com.

Screen Shot 2016-05-04 at 1.40.28 PM

After some research and testing of many different page capture tools, I found that this was the one for me. There are many different page capture extensions/apps out there, but in my opinion, this extension is the best. At Hawke Media, I use this tool 100% of the time, whether it’s for my own notes or notes for a client. This tool has proven to be very useful and I have even implemented it into my daily workflow, thus making my notes a lot more understandable when the person can visually see what I wrote in my notes. Small in size and it also doesn’t take up much space on your browser. It is placed next to the address bar and has a camera icon on it.  The install is rather easy since all you have to do is click on the “Add to Chrome” button your Chrome browser. There are no settings on the extension it is straightforward and the default image format is png.

Full Page Screen Capture Icon

Screen Shot 2016-05-04 at 1.40.43 PM

When using the extension it will begin to automatically scroll down the page as it captures each section of it. To get a full shot of the page make sure you are viewing the page in “Actual size” and it is not zoomed in or out. To make sure you are actually viewing in “Actual size” press command + 0 on a Mac or CTRL + 0 on a PC.  There is a pretty cool animation that happens during this process. You will see a small window with what appears to be Pacman gobbling down some dashes. The final page capture opens up a new browser tab with the image within. This gives you a preview of page you just captured also giving you the option to save the page capture. The file sizes depend on how much content is on that particular page. You can rename the file to fit your needs or leave the default name that is unique to each full-page capture that you take.  Feel free to click on the link below if you want to give the extension a try for yourself, trust me you wont regret it.

Link: Full Page Screen Capture

© 2017 | All rights reserved Hawke Media.