Google Chrome 设备框架在打开时不可见答案

【问题标题】：Google Chrome device frame is not visible when turned onGoogle Chrome 设备框架在打开时不可见
【发布时间】：2018-06-21 18:05:57
【问题描述】：

我知道我的问题超出了主题，但我还是会问。因为需要答案，所以我也在知乎上问过这个问题。

从这个site 它显示了如何启用框架。

我想截取我的网络应用程序的屏幕截图/甚至全屏截图以进行展示/将其用于报告。我为此使用了Chrome。

在开发者工具中有隐藏和显示Device Frame的选项。然而我并没有看到。

如您所见，右侧有一个溢出菜单 - hide device frame。我已经启用了它。

我从 Angular Material 页面截取了一个示例屏幕截图。如您所见，没有包装 Web 应用程序的设备框架。然而我启用了设备框架。 :(

我认为一旦屏幕截图完成，设备框架就会可见。但我所见即所得。

这是一个错误吗？有没有可以执行这个操作的扩展？

【问题讨论】：

【解决方案1】：

我从设置中添加了所有Device类型，这些都是带框架的

我的Chrome version: 67.0.3396.87

电话

Iphone 5/SE - 有方向，但没有提供键盘和工具栏。

Iphone 6/7/8 - 有方向，但没有提供键盘和工具栏。

Iphone 6/7/8 Plus - 有方向，但没有提供键盘和工具栏。

Nexus 5 - 无框架环绕，只有导航和状态栏。提供布局方向键盘和工具栏（来自 Chrome 浏览器）

Nexus 5x - 提供布局方向键盘和工具栏（来自 Chrome 浏览器）

Nexus 6P - 有方向，但没有提供键盘和工具栏。

平板电脑

Ipad - 有方向，但没有提供键盘和工具栏。

笔记本电脑

无

其余的都行不通。

（我注意到了，如果你连接到互联网，框架似乎会被下载。尤其是上面提到的那些）

在这种情况下，我的笔记本电脑处于飞行模式，并且已经有了框架，但没有其他组件，例如 Chrome 浏览器中的键盘和工具栏。

我打开网络。并再次选择该选项

自定义设备
您可以添加自己的自定义设备，但我怀疑框架只会包含您选择的品牌。

在 Opera 中，与 Chrome 开发者工具相同。在边缘。没有设备框架显示选项。

【讨论】：

我想知道为什么谷歌自己的设备（Pixel 系列）在 Chrome 中没有框架......
我们可以添加新的自定义设备框架吗？
@lady - 看来你可以。 :) ，但手机图像，我怀疑它。 developers.google.com/web/tools/chrome-devtools/device-mode
你是对的。打开我的互联网，它突然出现了！

【解决方案2】：

从 Chrome v97.0.4692.71 (Win10) 开始：

带框架的设备：

带有工具栏的设备（无框架）：

使用的测试程序：

【讨论】：