Take screenshots straight from Firefox's Developer Toolbar - gHacks Tech News

Take screenshots straight from Firefox's Developer Toolbar

I really like Firefox's Developer Toolbar which, unlike the name implies, is not only useful for developers but also users who like a speedy workflow in the browser. You can use the developer toolbar to manage Firefox add-ons for instance, to quickly enable or disable extensions or plugins in the browser, or to change Firefox preferences which is often faster than doing it on the about:config page.

The Developer Toolbar has more to offer for regular users of the Firefox web browser. Did you know that you can use it to create screenshots of the browser window? To use the feature in Firefox do the following:

  • Press Shift-F2 to open the Developer Toolbar at the bottom of the Firefox window. You will notice that it consists of a console and links.
  • To take a screenshot of the current page use screenshot filename

take screenshot firefox

Screenshots are automatically saved as png files on the system. The basic command takes a screenshot of the visible area of the web page displayed in the Firefox web browser. The following optional parameters are available:

  • delay: determines the time to wait in seconds before the screenshot is taken
  • fullpage: whether you want to take a screenshot of the visible page only, or all of the page
  • node: to take a screenshot of a single element using CSS

A basic command example is screenshot test.png 5 true which takes a full web page screen in five seconds after the command has been issued, and saves the image that is created as test.png in the default download save directory on the local system. You can use tab on the keyboard to use the suggestion that is displayed once you start typing in the Developer Toolbar to speed things up further.

developer toolbar screenshot

Note that the screenshot will not include the browser's interface but only the actual web page in the screenshot. Using the browser's built-in screenshot tool gives you the opportunity to create screenshots effortlessly without having to install a browser extension or desktop software. Even the system defaults, like using the print key or something like Windows' Snipping Tool, can't be handled as conveniently as this tool.

The screenshot feature is limited on the other hand as I pointed out earlier. You can't take a screenshot of the browser interface, freehand, or of select elements on the page conveniently without digging into the code of the page.

Update: While it did work on my computer to not include the file extension of the output screenshot, other users encountered issues when they tried that. They needed to add the .png file extension to the file name to get the feature to work properly.

Update 2: It is apparently only possible to create a full screen screenshot if you select 0 as the delay value. Any other value will result in a partial screenshot.

Update 3: Mozilla has updated the screenshot tool.

firefox screenshots

It is now possible to copy the screenshot to the clipboard instead of saving it to the local system, and to include the chrome of the browser in it.





  • We need your help

    Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

    We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats (video ads) or subscription fees.

    If you like our content, and would like to help, please consider making a contribution:

    Comments

    1. guest said on November 2, 2012 at 3:16 pm
      Reply

      I try to input “screenshot t123 0 true” but it says too many parameters…

      1. Martin Brinkmann said on November 2, 2012 at 4:21 pm
        Reply

        Which version of Firefox are you running? I get the same in nightly, but not in the stable version of the browser. The Nightly version seems broken in regards to some commands currently, it is also not displaying any suggestions when you type.

    2. Sina said on November 2, 2012 at 3:18 pm
      Reply

      Martin,
      I tried the both commands below, but only visible part of page included in screenshot. (Actually they acting same) Fx 16.0.2 Win7
      screenshot test 5 true
      screenshot test 5 false
      Am I missing something ?

      1. Martin Brinkmann said on November 2, 2012 at 4:24 pm
        Reply

        That’s strange. On which site did you test the feature?

        1. Sina said on November 2, 2012 at 8:14 pm
          Reply

          On Ghacks. After some testing, below command captured full page:
          screenshot test 0 true
          But setting delay number to any other number than 0, results visible area only !

        2. Martin Brinkmann said on November 2, 2012 at 8:21 pm
          Reply

          Interesting. I wonder why that is the case.

    3. Uhtred said on November 2, 2012 at 6:23 pm
      Reply

      just tried it and
      screenshot test.png 0 true
      gave me full page image of this webpage.

      whereas
      screenshot test 5 true … and
      screenshot test 5 false
      yielded visible area only, without a prompt for overwrite of file

      win7, FF 16.0.2

      useful, thanks for the tip :)

      1. Martin Brinkmann said on November 2, 2012 at 6:44 pm
        Reply

        Thanks, it did work for me without file extension. I have updated the article to reflect that.

      2. Sina said on November 2, 2012 at 8:43 pm
        Reply

        I don’t need to enter file extension, but any delay other number than 0, doesn’t capture full page.

    4. Crodol said on November 2, 2012 at 8:19 pm
      Reply

      Really cool! That makes you the top FF-geek!

    5. B. Moore said on November 4, 2012 at 12:56 am
      Reply

      Badass! Badass! Badass!

      Finally I get a good capture of a full webpage with ease.

      thank you for the awesome tip!

    6. Thomas said on January 21, 2013 at 11:29 pm
      Reply

      I’m using Firefox 18.0.1. Shift-F12 works. I try to input “screenshot t123 0 true” but it says too many parameters. Actually, anything after the filename gives me too many parameters. So it can only save the viewable part of the webpage. It won’t allow me to get the entire webpage. Any ideas?

    7. Thomas said on January 21, 2013 at 11:50 pm
      Reply

      Oh, I figured it out. Try this:

      screenshot fullpage.png ––fullpage

      1. Martin Brinkmann said on January 22, 2013 at 12:44 am
        Reply

        I corrected the command to show two dashes.

    8. nsn said on January 22, 2018 at 6:06 pm
      Reply

      WHERE the screenshot file will be placed? What the path?

      1. Martin Brinkmann said on January 22, 2018 at 6:08 pm
        Reply

        The screenshot is saved to the default download directory. Firefox displays the screenshot and the full path it is saved to when you run the command.

    Leave a Reply