How to Create Screenshots in Firefox

By  on  

Firefox's developer tools have been well-noticed due to the wealth of functionality they provide, but one tool you don't hear too much about is Developer Toolbar, which looks much like the console but serves a completely different purpose.  One of those purposes is allowing developers to create a screenshot of the current page in Firefox.  Let me show you how!

The first step is opening the Developer Toolbar with SHIFT+F2.  Once the Developer Toolbar is open, you can direct Firefox to take a screenshot of the current viewport with the following command:

Firefox Web Developer Toolbar

screenshot homepage.png

You can pass an additional configuration argument to get a screenshot of the entire page of the page:

screenshot homepage.png --fullpage

When these statements are executed, the image is saved to the browser's default download directory!

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Optimize Your Links For Print Using CSS â Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

Discussion

  1. I prefer to use the Firefox Dev Tool and enalbe the screenshot feature and click on the gear that do a fullscreen screenshot in a fast way :-D

  2. Nice article, I think there’s a typo there, it should be F12 and not F2

  3. Maux

    In my case, I used the shortcut key shift + f2
    And the command was screenshot homepage.png --fullpage
    I use Firefox 34.0 (PT-BR ‘portuguese/brazil’)/Windows 7

    • It was shift+f2 for me as well.

      Nice tip David! :)

  4. Patrick

    For info, the screenshot command is also available as a button in the devtools (for those who prefer clicking and have the devtools opened anyway).

    It’s not available by default, but it’s just one setting to turn ON and it’ll be there all the time afterwards:

    – open the devtools
    – click on the gear icon (toolbox options) in the top-right corner of the devtools window
    – look for the “Available Toolbox Buttons” section and check the “Take a fullpage screenshot” box
    – now you have a new icon in the devtools toolbar, it looks like a camera, just click it and you’ll have a screenshot of the current page in your download folder!

  5. Ashutosh Singh

    some corrections
    1. –fullscreen is not an option it’s fullpage
    2. it doesn’t work in inspect element window you need to open developer toolbar (in mac shift+fn+F2)

    it could have been awesome if it worked in inspect element window as well.
    By the way is there anyway I can invoke this from my Javascript code?

  6. This is really great! So far I relied on Print Screen button on keyboard but this far more efficient and flexible.

    • Toma Andrei

      You can also try Lightshot. It’s a tiny and very helpful tool for Windows/Mac. It’s activated with the regular Print Screen button on the keyboard, but it has multiple additional options: save, upload, share on social networks, copy, add text, add lines, etc. You can crop from the screen just what you need.

  7. Fireshot can be a best option to capture any part of the webpage, its very easy to use.

  8. Steve

    With the --fullpage option I would expect to get a screenshot from header to footer of the webpage even when it’s a page which is multiple vertical screens tall…

    Or do I just misunderstand the functionality of the --fullpage option?

    I’m using FF 40.0.3.

  9. Steve

    Hey – this works: screenshot --fullpage true

    Then I get a fullpage screenshot of a webpage with multiple vertical screens. It just saves then as true.png :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!