BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Google Chrome将新增设备模式,助力移动Web开发

| 作者 David Iffland 关注 4 他的粉丝 ,译者 赵震一 关注 0 他的粉丝 发布于 2014年9月1日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在即将发布的Chrome新版本中,Google升级了开发者工具,新增了一个叫做“设备模式”的图标,可以用来启用新型设备的显示模拟、媒体查询检查以及一个新的网络限流工具。这些工具可以让开发者非常容易地模拟各种设备及他们的网页在室外将会遇到的各种情景。

在现有的Chrome版本中,开发者可以通过打开模拟菜单(emulation drawer),然后从设备列表中进行选择来模拟一个例如像iPhone 5 或 Google Nexus 5这样的设备。然而,现有的工具具有一定的限制,并且不容易找到。而新的设备模式提供了一组改进的模拟工具来确保网页能够在各种情况下都看上去是正确的。目前已可以从Chrome Canary 频道进行下载,该频道提供了那些最终会出现在正式Chrome浏览器中的功能的早期预览版。

Google在“检查(Inspection)”的图标边上新增了一个新的图标用来启用设备模式。这一引人注目的位置反应了设备模拟对当今web开发者而言的重要性。

在设备模式启用之后,开发者可以在浏览器窗口中已经预设的设备之间进行切换,而无需回到开发者工具窗口,这与Firefox的响应式设计视图(Responsive Design View)非常相似。设备的预设并不只限于屏幕尺寸,同样也包括对像素密度的设置,从而可以在一个非高清屏的显示器中模拟“视网膜”屏。预设的内容还包括41个设备选项和现在的笔记本特定预设。

对设备屏幕的模拟只能解决部分问题,而Google在这方面做了进一步的探索。因为用户往往不会一直处于一个快速的网络之中,所以设备模式带来了一项新的特性,该特性可以让开发者模拟从高速到掉线之间的所有网速。在这种模式下,Chrome可以通过对网络速度的限制来展示用户在不同网速下的体验,包括只有部分内容被渲染的情况。

与设备模拟工具一起,Google还引入了一个新的媒体查询检查器,该检查器可以帮助开发者查看某个页面在CSS中定义各种断点后的展现,并且可以很容易地在这些断点之间进行切换。在这些断点中的某个断点上进行右击操作之后,将会把开发者的视线带到该媒体查询定义所在的CSS代码的对应行上。

开发者现在具备了一个“巨大的功能集合”:一个使用了被模拟设备真实的渲染引擎的设备模拟器,而非只是对被模拟设备显示配置的模拟。

在浏览器市场的其他成员中,Firefox 和Microsoft的Internet Explorer也都具备了分辨率切换器,允许开发者输入自定义的屏幕尺寸。Google在今年夏天早些时候的Google I/O大会上就对该新的开发者工具进行了介绍,并在开发者博客上提供了这些工具的大致背景

查看英文原文:New Device Mode in Google Chrome

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT