I know my question is out of topic, but I will ask anyway. Because I need an answer, I also asked this on Quora.
From this site it shows how to enable the frame.
I want to take a screen shot / even full screen shot of my web app for showcase / use it for reporting. I used Chrome
for this.
In the developer's tool there is this option to hide and show the Device Frame
. Yet I didn't see it.
As you can see, there is an overflow menu from the right - hide device frame
. I already enabled it.
I take a sample screen shot from Angular Material page. As you can see there is no device frame wrapping the web app. Yet I enable the device frame. :(
I thought it will be visible the device frame once the screen shot is done. But what I see is what I get.
Is this a bug? Is there any extension that can perform this operation?
Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS. Type dock, and then select a dock command: Dock to bottom.
Toggle Device Mode in Chrome If you've never been inside Developer Tools before, click F12 or open Chrome's menu > More Tools > Developer Tools. To activate device mode, simply click the device icon in the top left corner of the Developer Tools window. Click to the icon to toggle device mode.
I added all the Device
type from the settings, and these are the ones with a frame
My Chrome version: 67.0.3396.87
PHONE
Iphone 5/SE
- With orientation but no keyboard & toolbar offered.
Iphone 6/7/8
- With orientation but no keyboard & toolbar offered.
Iphone 6/7/8 Plus
- With orientation but no keyboard & toolbar offered.
Nexus 5
- No Frame wrapping, only navigation and status bar. Offers layout orientation keyboard and toolbar (from Chrome Browser)
Nexus 5x
- Offers layout orientation keyboard and toolbar (from Chrome Browser)
Nexus 6P
- With orientation but no keyboard & toolbar offered.
TABLET
Ipad
- With orientation but no keyboard & toolbar offered.
LAPTOP
None
The rest won't work.
(I've noticed that, it seems that the frame will be downloaded if you are connected to the internet. Especially those mention above)
In this case I was in airplane mode in my laptop and already have the frame, but not the additional components like keyboard and toolbar from Chrome Browser.
I turn the network on. And select again the option
Custom Device
You can add your own custom device, but I doubt the frame will only included base on the brand you choose.
Device Mode - Google Web Dev
In Opera, same as Chrome Developers tool. In Edge. There is no device frame display option.
As of Chrome v97.0.4692.71 (Win10):
Devices with frames:
Devices with toolbars (no frame):
Test procedure used:
⋮
menu on the device toolbar to "Show device frame"If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With