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

: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

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.

 

One comment 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

Leave a Reply

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