How to capture Screenshot within the browser
Tags: webdev, html, devtools, screenshot
Published: 2021-08-17 18:58:10

Ever wondered, if there could be a better way to take screenshots of elements within the browser? Well, if you do then you might find this post interesting.😇

In this tutorial, I am going to show you the best method to take screenshots of page elements without the need for any browser extension or third-party snipping software.

###Prerequisite:
####Basic knowledge of:
1) HTML
2) Browser's Developer Tools

###Demonstrated on following browsers:
1) <a href="#1-storyboardthat-using-google-chrome">Google Chrome (StoryboardThat)</a>
2) <a href="#2-google-colab-using-microsoft-edge">Microsoft Edge (Google Colab)</a>
3) <a href="#3-google-form-using-brave-browser">Brave Browser (Google Form)</a>
4) <a href="#4-flipkart-using-firefox">Firefox (Flipkart)</a>
5) <a href="#5-github-using-opera">Opera (GitHub)</a>

<b>Note:</b> _This tutorial only covers an in-depth explanation for Google Chrome but the steps remain same for all browsers._
<br/>
##1) StoryboardThat using Google Chrome

###<u>Step 1:</u>
Open DevTools and select the particular HTML Element you want to take a screenshot of. _Make sure that the blue selection covers the entire element you want._

![2021-08-17_23h49_51](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/1.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/1.png">View this image</a></center><br/>
###<u>Step 2:</u>
Now, right-click and from the context menu, select the <b>_Capture node screenshot_</b> option.

![2021-08-17_23h50_53](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/2.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/2.png">View this image</a></center><br/>
###<u>Step 3:</u>
The screenshot will be automatically downloaded in PNG format.

![2021-08-17_23h51_30](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/3.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/3.png">View this image</a></center><br/>
###<u>Result:</u>
![2021-08-17_23h51_47](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/4.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/4.png">View this image</a></center><br/>
###<u>Step 4:</u>
<b>_What if the screenshot image seems to be smaller than expected?_ 😥</b> 
Well, there are some creative ways of increasing the element dimensions so that you may end up with a much higher image resolution. You can try the below-mentioned steps:
1. Switch to Full Screen Mode
2. Delete unnecessary HTML elements from the page
3. Increase the page zoom level to make the desired element as big as possible.
4. Change the element's or its parent width and height to cover up the entire page space if needed.

<u>_Optional Step:</u> Open the same webpage on a screen with higher resolution (if you have one)._

<b>Note:</b> _While zooming the page, always make sure that your element dimensions do not extend beyond the browser's inner dimensions. And in case if it exceeds, then only the visible region is included, the rest part is cropped out of the screenshot._
<br/>
###<u>Step 4.1:</u>
Delete all the unnecessary elements from the page.
![2021-08-19_00h47_57](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/5.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/5.png">View this image</a></center>
![2021-08-19_00h49_06](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/6.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/6.png">View this image</a></center>
![2021-08-19_00h49_35](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/7.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/7.png">View this image</a></center>
![2021-08-19_00h50_03](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/8.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/8.png">View this image</a></center>
![2021-08-19_00h50_36](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/9.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/9.png">View this image</a></center><br/>
###<u>Step 4.2:</u>
Extend the height of the element's container to fill up the page's white space.
![2021-08-19_00h50_36](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/10.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/10.png">View this image</a></center><br/>![2021-08-19_01h16_47](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/11.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/11.png">View this image</a></center><br/>
###<u>Step 4.3:</u>
Make the browser Full Screen using `F11` shortcut key or whatever is applicable for your browser. Also, increase the page zoom level, I have set mine at 175%

![2021-08-19_01h26_42](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/12.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/12.png">View this image</a></center><br/>
###<u>Step 4.4:</u>
Repeat steps 2 and 3 to take the screenshot.
Now open the new screenshot, you will notice that its resolution is much greater than the previous one.

![2021-08-18_00h06_56](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/13.png)<center>_Left: Old Screenshot &nbsp;|&nbsp; Right: New Screenshot_</center><center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/13.png">View this image</a></center><br/>
##2) Google Colab using Microsoft Edge
![14](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/14.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/14.png">View this image</a></center>![15](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/15.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/15.png">View this image</a></center><br/>
##3) Google Form using Brave Browser
![16](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/16.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/16.png">View this image</a></center>![17](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/17.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/17.png">View this image</a></center><br/>
##4) Flipkart using Firefox
![18](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/18.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/18.png">View this image</a></center>![19](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/19.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/19.png">View this image</a></center><br/>
##5) GitHub using Opera
![20](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/20.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/20.png">View this image</a></center>![21](https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/21.png)<center><a href="https://raw.githubusercontent.com/soulehshaikh99/assets/master/blogs/first/21.png">View this image</a></center>
Well, that's it for this article. I hope you learned something new. Follow me for more posts just like this and let me know your thoughts in the comment section.<br/>Share this post with your friends. Thanks. 😊