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
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.
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.
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.
Advertisement
WHERE the screenshot file will be placed? What the path?
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.
Oh, I figured it out. Try this:
screenshot fullpage.png ––fullpage
I corrected the command to show two dashes.
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?
Badass! Badass! Badass!
Finally I get a good capture of a full webpage with ease.
thank you for the awesome tip!
Really cool! That makes you the top FF-geek!
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 :)
I don’t need to enter file extension, but any delay other number than 0, doesn’t capture full page.
Thanks, it did work for me without file extension. I have updated the article to reflect that.
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 ?
That’s strange. On which site did you test the feature?
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 !
Interesting. I wonder why that is the case.
I try to input “screenshot t123 0 true” but it says too many parameters…
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.