While browsing the internet, sometimes you want to show your friends a screenshot of a webpage you viewed.
The usual way is to press the Win and Print Screen keys, but this will take a picture of your entire screen. The image will be large in size, you will have to crop it to show them only the element you want and in general you will make a lot of clicks. Let's see a better way how to instantly take a screenshot of a specific element of a website, through Firefox and without using add-ons.
When a web page loads, your web browser creates a Document Object Model of the page. The DOM is structured as a tree structure where each node is an object that represents a portion of the document.
Let's see how you can use this feature to capture only a specific element in your screenshot:
1. Open the desired page in Firefox and right-click on the element you want to capture.
2. From the menu, select “Inspect Object”
3. The Inspector tool will open. Notice that it has a step-by-step analysis of the nodes of the DOM tree
4. There, select “Screenshot Node” from the pop-up menu
5. Your command will be automatically executed and a screenshot of the element will be saved as an image in the Firefox storage folder.
The advantage of this method is that it also captures long elements, including those that require scrolling. In our case, we requested the initial element of the page, i.e. the html, and it gave us an image of the full iguru website.
Alternatively, you can use the built-in screenshot command. In this article, we used the built-in “screenshot” command in Firefox to capture the entire page. The same command can be used to take a screenshot of a specific element of the page.
1. Open Firefox and press Shift + F2 on your keyboard. Firefox will open a command prompt at the bottom of the screen.
2. Type the following command
screenshot –selector “name”
Replace “name” with the appropriate element name. In our case, we want to get only the part that was related to the vulnerability in the WordPress plugin, it is
screenshot --selector "ul.thumbnails:nth-child(4) > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > img:nth-child(1)"
This second method is a bit tricky as you need to know how to find the path of the element. The average user would obviously prefer the first method to take a snapshot of a specific element of a web page.
