Open Bug 1278131 Opened 6 years ago Updated 9 months ago

Allow taking screenshot with device frame


(DevTools :: Responsive Design Mode, enhancement, P3)



(Not tracked)


(Reporter: ntim, Unassigned)


(Blocks 2 open bugs)


(Whiteboard: [multiviewport])


Not necessarily the frame of the right device, but a generic frame for the device type.
Chrome has a special frame for iPad/iPhones and Nexus phones. Other devices are not supported it seems.
Interesting idea!  Reminds of some design tools that offer a similar device frame option.
Priority: -- → P4
Whiteboard: [multiviewport]
Priority: P4 → P3
Facebook has a list of design files for popular devices that would be helpful for this:
Chrome DevTools recently added device frames, so we could investigate their approach as well.
So, it seems that Google Chrome adds the device's frame only when the design mode is set on "mobile" and it has an actual phone selected from the device list – basically, it loads the phone's specific frame, not a generic one.
(Note also that the viewport can't be resized if it has a device selected)
Product: Firefox → DevTools
Blocks: rdm-ux
Severity: normal → enhancement

So I just moved to Firefox Developer Edition from Google Chrome and I'd love to have this feature as I was used to it on Chrome. Sad to see it is missing, it really adds certain feel to it while developing and the screenshots look better when showcasing your work. Please consider adding it.

You need to log in before you can comment on or make changes to this bug.