If you’re a web developer, then you know that taking screenshots of webpages is a great way to capture important information and screenshots of websites are also great for debugging. Chrome has an awesome screenshot tool that makes it easy to take screenshots of webpages. Just open Chrome and type “chrome://screenshots” into the address bar and hit enter. You’ll be taken to a page with a screenshot button at the top. Just take a screenshot of the page you want to screenshot and hit enter. You can also save the screenshot as a PNG or JPEG file.
Whether you’re a budding tech writer or just trying to show your Mom how to send an email, there are many reasons you might want to take a screenshot of a webpage. Want to show a friend a neat webapp or you found, or tell your Twitter friends about a new Google feature you discovered? One of the best ways is to take a screenshot and share it. Many of us have tried to save a purchase receipt page or product key, only to find that the web page looks scrambled when you later open it. Take a screenshot, and it’ll always look picture-perfect. There are many ways you can take screenshots, but let’s look at a great way to take and annotate screenshots of webpages directly in the Chrome browser.
Getting Started
Install the Awesome Screenshot addon (link below) from the Google Chrome Extensions gallery as usual.
Now you’ll see a new lens icon in your toolbar. Click it and then choose to capture the visible part of the page or to capture the entire page.
If you choose Visible Part, it’ll only capture exactly what you can see right then in Chrome. If, however, you select Capture Entire Page, you’ll see a Capturing notification while the page automatically scrolls down.
The capture will only take a moment, and then will open in a new tab, complete with tools to help you annotate your screenshot.
Here’s a closeup of the toolbar. You can crop your screenshot, or add a variety of shapes or text to it.
The crop tool is very useful. Drag and select the area you want to crop, and it’ll automatically tell you the pixel dimensions of the selection. Drag the corners to enlarge or shrink the region, and then click Crop to crop the screenshot to that size.
Once you’ve cropped the screenshot, you’ll be able to add annotations as before, all from a very nice UI.
The Blur tool is very useful. Select it to get a blur brush that you can use to hide sensitive information on webpages. Here we’ve used it to hide our Gmail address; this would be great if we were making a tutorial on using Gmail.
Saving and Sharing Your Captures
Once you’ve made all the edits you want, click Done.
You’ll be presented with a preview of your screenshot ready to save or share.
Right-click on the image and select Save image as… to save the screenshot to disk. Currently all screenshots are saved in JPG format, but the developers plan to add PNG support in the future.
Alternately, if you’d like to share your screenshot online, click Share and your screenshot will be uploaded to an online photo storage service.
Once it’s uploaded, you can share the picture on a variety of services with one click. Note that the image URL is rather long, so if you’re sharing on Twitter you may want to copy the address and shorten it with a service such as Bit.ly. To do this, just click the address box at the bottom and it will automatically copy it to your clipboard.
Conclusion
If you’d like to take quick and informative screenshots from the web with Chrome, the Awesome Screenshot addon is one of the best ways to do it. It’s easy to use, and takes great looking screenshots on almost all webpages. Note that it cannot take screenshots of Flash content, but almost everything else came out great.
Install the Awesome Screenshot addon in Google Chrome
