写点什么

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

2014 年 8 月 31 日

在即将发布的 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

2014 年 8 月 31 日 13:575177
用户头像

发布了 52 篇内容, 共 20.1 次阅读, 收获喜欢 5 次。

关注

评论

发布
暂无评论
发现更多内容

万字长文,助你深度遨游Spring循环依赖源码实现!

云流

Java spring 编程

架构方法 - 学习笔记

心晴雨亦晴(~o~)

第六周学习总结

晴空万里

架构训练营第六周作业

一期一会

分布式系统

LeetCode题解:121. 买卖股票的最佳时机,一次遍历,JavaScript,详细注释

Lee Chen

算法 LeetCode 前端进阶训练营

week1总结

ルンルン

架构师训练营第二期 Week 6 总结

bigxiang

极客大学架构师训练营

架构是训练营第 10 周作业

郎哲158

第十周作业

Geek_ce484f

极客大学架构师训练营

Elasticsearch配置和集群维护

Rayzh

ELK 日志 Elastic Stack

第 10 周 模块分解

Pyr0man1ac

「架构师训练营第 1 期」第十周作业

张国荣

Dubbo微服务调用的时序图

天天向上

极客大学架构师训练营

架构师训练营 week6 课后作业

花果山

极客大学架构师训练营

Netty源码解析 -- FastThreadLocal与HashedWheelTimer

binecy

源码 Netty

架构是训练营第 10 周学习笔记

郎哲158

食堂就餐卡系统设计

ルンルン

架構師訓練營第 1 期 - 第 10 周作業

Panda

架構師訓練營第 1 期

week10作业

追风

架构师一期

架构师 01 期,第十周课后作业

子文

架构师训练营第一期第十周总结

Leo乐

极客大学架构师训练营

架构师训练营第十周作业

Shunyi

极客大学架构师训练营

架构师训练营第二期 Week 6 作业

bigxiang

极客大学架构师训练营

第十周总结

orchid9

第六周 cap原理

Geek_9527

CAP原理简述&Doris 临时失效处理过程

Mars

CAP原理

架构师训练营 week6 学习总结

花果山

极客大学架构师训练营

第十周作业

极客大学架构师训练营

第十周作业总结

Geek_ce484f

极客大学架构师训练营

周练习 10

何毅曦

JVM垃圾回收

少林寺三毛

JVM

演讲经验交流会|ArchSummit 上海站

演讲经验交流会|ArchSummit 上海站

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