适用于第一代移动设备的新设备模式

Paul Bakaus
Paul Bakaus

针对移动优先的新型 Device Mode

一年多前,我们推出了 Device Mode,这是一种模拟设备并使用自适应设计的方式。现在是时候进行首次重大升级了,从 Chrome 49 开始那么,有哪些新变化呢?

移动设备正成为 Chrome 开发者工具的起点。虽然我们过去提供了模拟移动设备的方法,但开发默认使用的平台是桌面设备。移动设备模拟功能始终必须处于开启状态。现在,在很多方面,移动网站的使用量已取代桌面设备,我们同样在开发者工具中的位置上转变。

最新动态

新的设备模式。

首先,界面经过精简,占用的空间更少。我们预计新的 Device Mode 会成为大多数人的主要开发模式,因此要求采用清晰简洁的设计,扩展开发者工具主导航栏。

新的设备模式。

媒体查询上的新快速跳转设备标尺。

此外,我们还将视口居中,并在顶部添加了一个新的快速跳转设备标尺,这对于自适应设计很有帮助,可以让您了解最常见的设备尺寸。

最后,尽可能将许多选项捆绑或隐藏在切换开关之后。这些新的复合选项可让您更轻松地切换模式。要切换某些控件或自定义工具栏体验,可以点击三点状小菜单图标。

默认自适应

“Device Mode”下拉菜单。

现在,开发者工具主工具栏会展开到浏览器窗口的左侧,其中包含用于模拟各种移动设备和桌面设备的最重要工具。有两种开发模式可供选择:

  • 自适应广告
  • 特定设备

在这两种模式下,视口都位于 Chrome 内自身可调整大小的窗口中。这样做的一个显著优势是,您可以按照自己喜欢的方式最大化浏览器窗口和开发者工具,并且在测试多种尺寸的网页时避免它们来回切换。

在主动迭代期间,您应采用自适应模式,以确保您的网站可在所有设备上正常运行,而不仅限于少数特定设备。在这种模式下,视口旁边的手柄可自由调整大小。

特定设备是指您选择特定设备并将视口锁定为其大小。当您想对几款即将发布的热门设备进行最终修复和润色时,这会非常有用。因此,我们不仅在下拉菜单中显示了一个庞大的列表,其中包括各种设备,而是当前最热门的设备。如果您选择其中一个选项,我们会尽力使其行为与真实事件类似:触摸事件、用户代理、视口以及设备 Chrome 和界面(如果有)都会模拟。

集成式远程调试

即便是可用的最佳模拟,也只能做到这一点。目前,模拟功能无法实现某些功能,例如:

  • 检查按钮的尺寸是否足以容纳您的拇指。
  • 请在运行速度较慢的手机上测试您网站的性能。
  • 调试某些设备的随机怪异行为和限制。

为了充分测试所有这些场景,您需要使用实际实体设备进行测试、工作和调试。

“Inspect Devices”对话框。

现在,您可以浏览到 chrome://inspect,通过 USB 连接设备,并通过开发者工具打开远程调试会话。不过,我们现在更进一步,重构了远程调试的外观和行为,将其嵌入开发者工具的核心。现在,您可以直接在新的主菜单中以对话框的形式访问 Inspect Devices,而无需浏览其他页面。这样可以更轻松地将物理调试纳入工作流 - 只需插入手机,无需退出开发者工具!

旧版模拟控件的其他部分现已迁移至新位置

由于现在开发者工具中默认使用移动设备,因此网络节流等功能会移到合适的位置,在本例中为“网络”面板。

更多工具

某些功能(例如传感器的模拟)或渲染设置(如模拟打印媒体)已移至抽屉式导航栏中的同一位置。您可以在新版主菜单的“更多工具”下找到所有额外选项。

我们知道这是一项重大变更,都需要我们适应。 您可以在刚刚更新的 Device Mode 文档中详细了解其中的所有内容。我们欢迎您在 Twitter 上分享您的意见,如果您的字符数超过 140 个,请通过我们的错误跟踪工具与我们联系(即便是功能请求也是如此)。