When browsing the web, you sometimes want to show your friends one screenshot from a website you saw.
The usual way is to press the Win and Print keys Screen, αλλά έτσι θα πάρετε μία εικόνα όλης της screen your. 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 the use of add-ons.
When a web page loads, the web browser creates a Document Object Model of the page for you. The DOM is configured as a tree structure where each node is an object representing a part 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 the Shift + F2 keys on the keyboard. Firefox will open a line as a command console 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.
