Κατά την πλοήγηση σας στο διαδίκτυο, μερικές φορές θέλετε να δείξετε στους φίλους σας ένα screenshot από μία ιστοσελίδα that you saw
The usual way is to press the Win and Print Screen keys, but this way you will get a picture of the whole screenyour The image will be large in volume, you'll have to crop it to show them just the element you want, and you'll generally be clicking a lot. Let's see a better way how to get one instantly screenshot from a specific element of a web page, through Firefox and without using add-ons.
When a web page is loaded, your web browser creates a Document Object Model of the page. The DOM is configured as a tree structure where each node is an object that represents a portion of the document.
Let's look at how you can use this feature to capture only one item on your screenshot:
1. Open the desired page in Firefox and right-click the item you want to capture.
2. From the menu, select "Object Control"
3. The Inspector tool will open. Observe that it has the stepwise analysis of the DOM tree nodes
4. From there, select "Screenshot Node" from the pop-up menu
5. Your command will be executed automatically and an item display will be saved as an image in the Firefox storage folder.
The trump card of this method is that it also captures long elements, including those that require scrolling. In our case, we asked for the original element of the page, ie the html, and gave us an image of the complete website of the iguru.
Alternatively, you can use the built-in screenshot command. In this article, we used the "screenshot" command embedded in Firefox to capture the entire page. The same command can be used to get a representation of a specific page item.
1. Open Firefox and press Shift + F2 keys on the keyboard. Firefox will open a line as console commands at the bottom of the screen.
2. Type the following command
screenshot –selector “name"
Replace the "name" with the appropriate item name. In our case wanting to get only the vulnerability tracker 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 difficult as you need to know how to find the path of the item. The average user would obviously prefer the first method to get a snapshot of a particular item on a web page.