Take screenshots of webpages in Firefox

Are you working on a website & need a quick way to send someone a screenshot of what you are doing ?

Firefox has a screenshot tool built right in the browser that you can use to grab the entire web page or just what’s showing in the viewport or hover over a specific element on the page & capture just that.

Many of us take a lot of screenshots & send them to other people to communicate about websites we’re working on, projects we’re working on or ideas we have.
There are a lot of tools, plugins & add-ons to take screenshots.

Firefox has a screenshot tool that might be just the right fit for making it very quick and easy to take the screenshots that you need.

Firefox screenshot tool

In the above image, you can see up in the URL bar, in the Page action menu, click on three dots and select Take a Screenshot from the drop-down or you can also take a screenshot by right-clicking on a page and selecting Take a Screenshot

Firefox screenshot tool displays two options

In the above image at right side corner you can see that after clicking on Take a Screenshot you have a choice.
We can take a screenshot of just the visible view port or we can do full page.

Firefox screenshot save visible option

Let’s say if we click on Save visible, we can see that it does take a screenshot of what was visible (refer above image)

It doesn’t take a screenshot that includes the browser tabs or anything else that’s going on in your computer.
It just gets the exact webpage that’s inside the viewport.

If we click on Save full page, we can see that it does take a screenshot of the entire webpage for this really beautiful website.

This is really helpful for those of us who design or build websites.

You can also drag and pick the part of the webpage that you wish to capture (refer image below)

Mess around with it until you get what you want, and then save or copy your screenshot.

Another way to pick something is to hover over elements on the page.

In the below image, there’s sort of the wrapper, probably that goes around the text or you can even hover over an image to get a wrapper

This is a really great way to get just part of the page without having to fuss with crop marks and try to get it exactly to the edges of the pixels.

Select a region to take screenshot

Firefox knows what a DOM is, it knows what all these elements are. It can help use those elements to grab exactly the part that you want.

And after selecting a specific part of webpage we have three choices :

  1. We can download the file (which is going to put our screenshot image file in my Downloads folder)
    or
  2. We can copy this image (which means the file is not going to end up on my computer at all and I can go over to some sort of chat window or whatever and I can just paste it quickly)
    In the image below at right side bottom corner you can check the popup displayed which says that your screenshot has been copied to clipboard.
  3. Cancel: To cancel your selection, click on the Cancel icon

If this post was helpful, please like and share below to show your support !