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)
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?
Shift + F2 screenshot --clipboard
Done 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.
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