Firefox 16 Developer Toolbar – Screenshot

Today, Mozilla launched Firefox 16. This release contained, for us developers, a shiny new developer toolbar. One feature that I’m particular excited about is the screenshot feature. It lets you take screenshot of the whole page or a specific element.

First, fire up the new toolbar. This is done by either navigating through Tools -> Web Developer -> Developer Toolbar.

The toolbar will open up and position itself at the very bottom:

Firefox 16 take screenshot

Capture the whole page

To take a screenshot, simply execute the screenshot command. For example, if we want to capture the whole page, type:

screenshot full.png 0

This specifies that we want a screenshot taken after 0 (zero) seconds saved to full.png. As you understand, we can also wait ten seconds before capturing:

screenshot full.png 10

When the screenshot is completed, you’ll get a nice popup telling you the location of the saved file.

Note: Only .png files are supported. Every filename must therefore end in .png.

Capturing a specific element

We can also capture a specific element. This is done by providing a css selector as the fourth argument. When typing this command, note that it won’t let you capture elements that does not exist. Very helpful.

screenshot sidebar.png 0 false #primary

This will capture the contents of my sidebar into a file named sidebar.png.

Note that i added a third argument, false. This controls whether the screenshot should also include parts of the webpage which are outside the current scrolled bounds. It defaults to false.

Remember that you can always type “help <command>” to get more information about a particular command.

  • Alrx