How To Screenshot On Chrome (Step-By-Step) - 2022 Update

How To Screenshot On Chrome

If you've ever needed to take screenshots of an entire webpage, you know how inconvenient it is to have to manually scroll through the page and take multiple screenshots.

There's good news! You can use a couple of tools to capture entire web pages and make your life much easier.

One of these tools is built into Chrome, while the other is an extension.

Built-in Chrome option

The benefits of using this method include not having to download an extension and the tool is one of the best when it comes to ignoring any sticky bars while scrolling the website.

Here's how to put it to use:

  1. Click on the three "more" dots in the upper-right corner of your browser window.
  2. A new window will appear. Go to "developer tools," then "more tools."
  3. You'll see a new window pop up with code and you'll be in a slightly different view mode.
  4. If the page still doesn't look right, click the "toggle device toolbar" icon in the developer window's top-left corner.
  5. Select which device you'd like to see the screenshot on using the "responsive mode" option. Simply set it to "responsive" to use the default.
  6. You'll notice a new "more" button at the top right of this new row. To get it all, click this and select "capture screenshot" or "capture full-size screenshot" from the menu.
  7. After a few seconds, you'll notice that the tool has already downloaded and opened a file for you.

Keep in mind that the site's footer was cut off in my example, so keep that in mind if you use this tool.

Chrome Extension: Awesome Screenshot & Screen Recorder

  1. Go to the Chrome web store or Google and look for the extension "Awesome screenshot & screen recorder."
  2. After you've installed the extension, you'll notice a bright icon at the top of your toolbar.
  3. When you're on the website you want to capture, click the extension. If you hover over an option, you'll see a list of options and their keyboard shortcuts.
  4. You can take a screenshot of a visible section of a page, the entire page, or a specific area. If that's what you're looking for, the extension can even help you record screen captures.
  5. Select a full page to take a screenshot of the entire webpage.
  6. After a few seconds, you'll be taken to a page with the screenshot.
  7. You'll notice a new toolbar at the top of your page that allows you to add annotations to your screenshot. You can easily add annotations, text, and arrows, as well as crop sections out, as shown below.
  8. To save your changes, click the done button in the right-hand corner once you've finished adding your annotations.
  9. On the right, a new window will appear with a variety of options for saving and sharing your new screenshot via a share link, Dropbox, email, Slack, and other methods. You can save the screenshot manually or copy it to paste somewhere else.

See the source image

So there you have it: two simple methods for taking screenshots of entire websites and annotating them if necessary.

Start snapping!

How To Screenshot On Chrome FAQs

How do I capture a full-page screenshot in Chrome?

Simply open the extra menu options in your Device Toolbar and select "Capture full-size screenshot" to download your full-page screenshot. Chrome will download the entire page for you. Crop as needed from here to get the image you want.

Using Google Chrome Developer Tools, how do I take a screenshot?

A hidden feature in Google Chrome's Developer Tools allows you to take full-sized screenshots of any web page. This feature, similar to a scrolling screenshot, captures the entirety of a page without the use of a third-party extension. To begin, open Chrome and navigate to the web page you want to save.

How do I take a screenshot on a website without any extension?

This feature, similar to a scrolling screenshot, captures the entirety of a page without the use of a third-party extension. To begin, open Chrome and navigate to the web page you want to save. After that, click the three dots, then "More Tools," then "Developer Tools."

About the Author
Author: Daniel Luke
Daniel is a WordPress web designer with vast experience working with various WordPress themes that allows him to compare and contrast different themes, understand the strengths and weaknesses to develop factual, real-world reviews.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...