Chrome

How to Take Screenshots on Google Chrome

The Google Chrome Developer Tools can be used to take screenshots of web page elements from Google Chrome. You can take screenshots of specific web page elements or the entire web page using the Google Chrome Developer Tools.

In this article, we will show you how to take screenshots of specific web page elements or the entire web page using Google Chrome Developer Tools.

Topic of Contents:

  1. Opening the Google Chrome Developer Tools
  2. Selecting a Specific Element from the Webpage Using Google Chrome Developer Tools
  3. Taking Screenshots of the Webpage Elements Using Google Chrome Developer Tools
  4. Taking Screenshots of the Full Webpage Using Google Chrome Developer Tools
  5. Conclusion
  6. References

Opening the Google Chrome Developer Tools

To open the Google Chrome Developer Tools, run the Google Chrome, visit the web page that you want to take screenshots of, and press <Ctrl> + <Shift> + I.

If you need any assistance in opening the Google Chrome Developer Tools, read the article on How to Open the Google Chrome Developer Tools.

Selecting a Specific Element from the Webpage Using Google Chrome Developer Tools

If you want to take screenshots of a specific element from the web page using the Google Chrome Developer Tools, you need to be able to select the element that you want to take screenshots of from the web page.

You can select an element from the web page from the “Elements” tab of the Google Chrome Developer Tools.

You can also use the “Inspect” tool of the Google Chrome Developer Tools to select an element from the web page.

To use the inspect tool, click on

from the top-left corner of the Google Chrome Developer Tools.

Select the element that you want to take a screenshot of from the web page. Once the element is selected, the HTML code section should also be automatically selected in the “Elements” tab.

Taking Screenshots of the Webpage Elements Using Google Chrome Developer Tools

To take a screenshot of the selected web page element, right-click (RMB) on the selected HTML parent element from the “Elements” tab and click on “Capture node screenshot”.

A screenshot of the selected web page element should be taken and saved on your computer.

As you can see, a screenshot of the selected web page element is successfully taken.

Let’s try to take a screenshot of another web page element using the Google Chrome Developer Tools.

Select the table of contents in one of the LinuxHint articles, right-click (RMB) on it, and click on the “Capture node screenshot” to take a screenshot just as we recently did.

A screenshot is now taken and saved.

As you can see, a screenshot of only the table of contents is taken.

Taking Screenshots of the Full Webpage Using Google Chrome Developer Tools

To take a screenshot of the full webpage, navigate to the “Elements” tab of the Google Chrome Developer Tools. Scroll all the way up and select the html tag. This selects the entire web page.

Now, right-click (RMB) on the html tag and click on “Capture node screenshot”.

A screenshot of the entire web page should be taken and saved on your computer.

As you can see, the screenshot of the full web page is successfully taken.

Conclusion

We showed you how to open the Google Chrome Developer Tools. We also showed you how to select specific web page elements using the inspect tool of the Google Chrome Developer Tools and how to take screenshots of specific web page elements and the full web page using Google Chrome Developer Tools.

References:

About the author

Shahriar Shovon

Freelancer & Linux System Administrator. Also loves Web API development with Node.js and JavaScript. I was born in Bangladesh. I am currently studying Electronics and Communication Engineering at Khulna University of Engineering & Technology (KUET), one of the demanding public engineering universities of Bangladesh.