Wednesday, November 7, 2012

Take screenshots straight from Firefox’s Developer Toolbar

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.

DIGITAL JUICE

No comments:

Post a Comment

Thank's!