Easily take Screenshots of Web Pages in Firefox


(beep) – For many of us, we
take a lot of screenshots and send them to other
people, communicating about websites we’re working on,
projects we’re working on, ideas we have. There are a lot of tools
to take screenshots. Firefox has one that might
be just the right fit for making it very quick and easy to take the screenshots that you need. – Let’s look at it. Here, you can see up in
the URL bar, this thing that’s called the Page action menu. It’s these three dots
and if you click on it, in here it says Take a Screenshot. And then we have a choice. We can do just the visible view
port or we can do full page. Let’s say, Save visible,
and we can see that it does take a screenshot of what was visible. It doesn’t take a screenshot that includes the browser chrome or
anything else that’s going on in your computer. It just gets the exact webpage
that’s inside the view point. Or, Save full page and you
can see the entire webpage for this really beautiful website. Really helpful for those of us who design or build websites. You can also drag and pick
the part of the webpage that you want to show. You can scroll even and
make these crop marks be kind of exactly what you want. Mess around with it until
you get what you want, and then save or copy your screenshot. The fourth way to pick
something is to hover over elements on the page. IF you make websites
you’ll recognize this. There’s the image, there’s
sort of the wrapper, probably that goes around that audio
file and the image, and then here’s the wrapper that
goes around the whole card that this is part of. 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. 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 I have two choices here. I can download the file. Which is then going to put
it in my Downloads folder, or I 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, and not have to worry about deleting all those files later. If you want to learn more
about the Firefox screenshots tool, there’s a page on
the Mozilla support website that explains how it works,
a few other details about the way you can configure it. There’s also a page on MDN
that shows you how to use screenshots from within the
developer tools themselves. I’m going to make another video
about that, but if you want to jump ahead and check it out now, you can look at this page on MDN. Otherwise, I hope this
is super helpful for you. That the screenshots tool is
something that you can work into your workflow as a
developer, or designer, or a person working on websites. And let us know if you have
any ideas about how this tool could be better. Let us know in the comments. We’re definitely keeping an eye on that. We want to hear from you, so we know how to serve your needs better. There you go. Screenshots in Firefox. (upbeat music)

Add a Comment

Your email address will not be published. Required fields are marked *