Categories: Developer Tools

Screenshots from the Console

Firefox DevTools has now added a screenshot command, so you can take screenshots directly from the Console (bug #1464461).

To access the command, open the Web Console via Tools → Web Developer → Console, type in :screenshot and press ENTER. A screenshot of the current document will be downloaded to your downloads directory.

 

You can also use the flags, as you could with the old screenshot command that was part of the GCLI. Here is a quick list, generated with screenshot --help

<span style="font-weight: 400;">:screenshot --fullpage  // take a screenshot of the whole page
:screenshot --selector “.some-class”// take a screenshot of an element on the page
:screenshot --clipboard --fullpage  // take a screenshot of the full page and add it to your clipboard</span>

About the syntax

You may have noticed the new colon syntax used for the screenshot command. We are using this to represent commands that are not part of the web environment, that can be accessed from the console. Moving screenshot to the console is part of the work we are doing to unship GCLI, you can learn more about this here. The GCLI used a UNIX style input grammar, and after some discussion we decided to keep it. The command is not part of the JavaScript language, or web APIs, and could potentially be confusing. This is why we use the : character to prefix commands. If this is something that works well, we may expand it to include other commands. For example, you can also try out :help to get the same result as help().

If there are other commands that you would like to see available in this format, let us know. If you are working on a web extension and would like to be able to implement your own web commands, let us know about that too, so we can work on getting you what you need.

Autocomplete

If you start typing a command prefixed by the : symbol in the console, you will see an autocomplete menu for commands (done in bug #1473923). At the moment it only contains the two available commands, :screenshot, and :help. We do not yet have support for the flags, but this may be added in a future iteration.

Future work

We have deprecated the “Upload to imgur” functionality with the new screenshot feature. In a future iteration, we plan to allow uploading to Firefox Screenshots directly, and be able to share them from your profile (you can read more about this feature here).

At present, the screenshot feature can be used from the browser console as well, but it will only capture the chrome of the browser and not the content window. This is planned for a future iteration (see bug #1474006)

Known bugs, and where to report issues

We have a couple of known bugs which can be found under this metabug. If you come across something that isn’t working as expected and hasn’t been listed, feel free to open a new issue.

 

5 comments on “Screenshots from the Console”

Post a comment

  1. Caspy7 wrote on

    I’m not a web developer, but it’s nice to have this type of feature.

    Would it be possible to have autocomplete once you hit dash (-) after :screenshot ?

    Reply

  2. Franush wrote on

    Hi,

    I’d really like a hotkey to make the screenshot.

    So far it is hotkey to get to the console and :sc then tab to autocomplete then enter – really useful at that – but a hotkey to do it all in one would be cool. I know there is the F12 then mouse click the camera icon but that’s taking one hand off the keyboard 🙂

    Thanks

    Franush

    Reply

  3. John wrote on

    Hi, when we take screenshot for a specific element with the “`–selector“`, can we have the option to include the area that is outside the scrolled bounds? Much like the “`–fullpage“` does but only for a specific element.

    Reply

  4. Gaurav wrote on

    How can we automate this process.
    I have list of URL for which I want to take fullpage screenshot. Is there a way where we can send these commands using Selenium or directly from Terminal

    Reply

  5. kokoronagomu wrote on

    I’m on Firefox Nightly, and there is a screenshot tool. At first, it was possible to take a screenshot of whatever size rectangle you wanted. As you moved your mouse, it would highlight an area that you then could click on it, and expand the sides, top and bottom parameters to encompass what you wanted to copy. Now you have the choices, ”whole page” or ”visible”, or it will highlight areas as you move the mouse, click on that, but now it gives you no options to change the parameters.

    I preferred the tool when it had more options.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *