CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
RoCkDevstack
RoCkDevstack

Reputation: 3817

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?

Upvotes: 41

Views: 57352

Answers (3)

Sid
Sid

Reputation: 4512

Click at the top right corner (little triangle) and pick the "Show device frame" option from drop down there:

enter image description here

Upvotes: 1

OXiGEN
OXiGEN

Reputation: 2409

As of Chrome v97.0.4692.71 (Win10):

Devices with frames:

  • Moto G4
  • Nexus 5X
  • Nexus 6P
  • Nest Hub
  • Nest Hub Max
  • iPhone 5/SE
  • iPhone 6/7/8
  • iPhone 6/7/8 Plus
  • iPad

Devices with toolbars (no frame):

  • Nexus 5

Test procedure used:

  1. Toggle Device Toolbar (Ctl+Shift+M) to show device mode
  2. Click the ⋮ menu on the device toolbar to "Show device frame"
  3. Click the device list menu to select "Edit..."
  4. Manually select every option on the Devices list on the dev panel (since there is no Select All option)
  5. Click the device list menu to set the view to the top-most option
  6. Manually start deselecting each device on the dev panel, starting from the top. When the current selection is deselected, the view automatically shifts to the next device on the list.
  7. Reselect the devices I actually want

Upvotes: 17

RoCkDevstack
RoCkDevstack

Reputation: 3817

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.

Upvotes: 59

Related Questions