Improve "Taking a screenshot" feature

Developer Tools
#1

I would like to suggest some improvments to “Taking a screenshot” feature of new “Responsive Design Mode”, taking inspiration from ScreenGrab extension.

  • Ability not only to save but also copy into clipboard current screenshot
  • Ability to capture not only visible area, but also entire page

(actually to obtain last feature is possibile from inspector right-clicking onto BODY tag and taking a screenshot of the node but is obviously slower)

3 Likes
#2

Really cool feature ideas indeed.

Copying to the clipboard is soooo useful when working with other image software, so you don’t have to go and open a file, you can just paste the image right in.
In fact, we have a setting for this, I made a video a few days ago that shows how to do it:

Unfortunately, the Responsive Design Mode doesn’t seem to honor this setting. @jryans might know if there is already a bug being tracked for adding this.

As for taking full page screenshots, there is a quicker way:

  • go in the settings panel
  • check the Take a screenshot of the entire page button in the Available Toolbox Buttons section
  • this adds a new camera icon into the DevTools toolbox toolbar

Now, clicking this button will take a screenshot of the entire page, whether you are in Responsive Design Mode or not.

However, the camera button in the Responsive Design Mode toolbar always only takes a picture of the visible viewport. Here again, maybe we should honor a global setting that applies to all buttons in DevTools?

#3

Shift + F2
screenshot --clipboard
Done :slight_smile: Work in responsive design mode also. You have lots of options for imgur, CSS selectors etc. Just use tab to autocomplete to see all of them.

I prefer to use builtin features over legacy addons. Legacy addons tend to make Firefox slower from my experience.

1 Like
#4

Thanks for your infos.

I did not know availability of last button you mentioned, useful, but I think that for coherency, it should added also to “responsive design mode” toolbar, just to not have an icon fro screenshot in inspector header and another one in “responsive design mode”. I suggest to group them

#5

Shift + F2 opens the developer toolbar. It’s not a button.

#6

It seems like this got lost in the shuffle when copy to clipboard was first added. I filed bug 1351696 about it.

#9

I would like to have both options suggested here.

Having an option to create GIFs would be cool too.

#10

really nice trick thank you, but I can’t wait for a box to check !