google-chromegoogle-chrome-devtools

Google Chrome device frame is not visible when turned on

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.

sample

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. :(

angularMaterial

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?

Solution

  • 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.

    airplane

    I turn the network on. And select again the option

    network

    Custom Device
    You can add your own custom device, but I doubt the frame will only included base on the brand you choose.

    Custom Device

    Device Mode - Google Web Dev

    In Opera, same as Chrome Developers tool. In Edge. There is no device frame display option.