HOW TO take a full page screenshot of a web page directly with Firefox
In Firefox (version 33), use the shortcut Shift-F2 or open Tools > Web Developer > Developer Toolbar.
At the command line that appears, type the command:
screenshot filename.png --fullpage
Unlike the full page screenshot option with the Responsive Design View that generates screenshots at different screen resolutions and with a predefined filename, the above Developer Toolbar Command line option lets you name the file as you like.
The screenshot command accepts multiple arguments to customize the screenshot images -
screenshot [filename] [--clipboard] [--chrome] [--delay ...] [--fullpage] [--selector ...]
Save a PNG image of the entire visible window (optionally after a delay)
Options:
[filename] (string, helpManOptional)
The name of the file (should have a '.png' extension) to which we write the screenshot.
[--clipboard] (boolean, required)
True if you want to copy the screenshot instead of saving it to a file.
[--chrome] (boolean, required)
True if you want to take the screenshot of the Firefox window rather than the web page's content window.
[--delay ...] (number, helpManOptional)
The time to wait (in seconds) before the screenshot is taken
[--fullpage] (boolean, required)
True if the screenshot should also include parts of the webpage which are outside the current scrolled bounds.
[--selector ...] (node, helpManOptional)
A CSS selector for use with document.querySelector which identifies a single element
I extracted the above information by typing this at the command line -
help screenshot
I was able to take the screenshot of a specific part of a larger web page by using the selector command line parameter -
screenshot hyderabad-book-stores.png --selector #businesses-nearby-slot
The command line provides hints inline for each parameter. Pressing F1 gives me even more help about the current parameter.
At the command line that appears, type the command:
screenshot filename.png --fullpage
Unlike the full page screenshot option with the Responsive Design View that generates screenshots at different screen resolutions and with a predefined filename, the above Developer Toolbar Command line option lets you name the file as you like.
The screenshot command accepts multiple arguments to customize the screenshot images -
screenshot [filename] [--clipboard] [--chrome] [--delay ...] [--fullpage] [--selector ...]
Save a PNG image of the entire visible window (optionally after a delay)
Options:
[filename] (string, helpManOptional)
The name of the file (should have a '.png' extension) to which we write the screenshot.
[--clipboard] (boolean, required)
True if you want to copy the screenshot instead of saving it to a file.
[--chrome] (boolean, required)
True if you want to take the screenshot of the Firefox window rather than the web page's content window.
[--delay ...] (number, helpManOptional)
The time to wait (in seconds) before the screenshot is taken
[--fullpage] (boolean, required)
True if the screenshot should also include parts of the webpage which are outside the current scrolled bounds.
[--selector ...] (node, helpManOptional)
A CSS selector for use with document.querySelector which identifies a single element
I extracted the above information by typing this at the command line -
help screenshot
I was able to take the screenshot of a specific part of a larger web page by using the selector command line parameter -
screenshot hyderabad-book-stores.png --selector #businesses-nearby-slot
The command line provides hints inline for each parameter. Pressing F1 gives me even more help about the current parameter.
Comments
Post a Comment