开发者不可不知的 Google Chrome 七大新特性

标签: 综合新闻 | 发表时间:2014-10-13 23:23 | 作者:
分享到:
出处:http://www.oschina.net/?from=rss

Google Chrome 在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools 同样也是网络开发者进行网络开发的重要工具。

DevTools 在不断的进行版本更新,其中有很多重要的更新细节你可能会错过。在这里罗列了 Google Chrome 最值得关注的七大新特性。

开始——Chrome 的 DevTools Experiment

Chrome 有一些非常棒的实验性特性,这些特性在默认情况下都是隐藏和禁用的。在浏览器地址栏输入 chrome://flags/#enable-devtools-experiments可以激活 DevTool Experiment 选项,在激活后重启浏览器。

重启后,启动 DevTools,点击齿轮图标移的右上角 DevTools 面板,你可以在左边栏看到“Experiment(实验)” 选项,在这里你可以选择任何一个想要激活的特性。

1. 改进移动设备模拟器

在移动设备高度普及的今天,网站的一个必备功能就是进行移动设备的优化。使用 Chrome 浏览器,你可以通过手机模拟器功能调试网站在移动模式的应用,这个模拟器已经被完全修改并增加了许多新特性。

启动 DevTools 并点击移动设备图标然后点击 loop/search(循环/搜索),打开移动设备模拟器,截图如上所示。正如你所看到的,上面的模拟器已经配备了标尺,因此你可以清楚看到网站视窗的尺寸大小。

2. 鼠标的复选

你想拥有在一个源文件里同时选择编辑多个不同主题的功能?Chrome 现在支持鼠标的复选。使用 Ctrl + 点击或者 Cmd+ 点击可以一次性选择多个。

3. 限制网络连接

现在你可以通过 DevTools 测试在不同连接下网站的响应和性能。在 DevTools 中,点击 Esc 启动 Console Drawer 然后选择 Emulation。在网络选项上,选择限制网络连接的速度类型,然后你就可以看到网站在执行选定的速度的情况下的表现了。

4. 脱机模式

Google Chrome 现在增加了脱机模式,它允许你在没有网络连接的情况下打开网站。如果你在进行网络开发,想要用户在没有网络的情况下也能打开网站,那么这无疑是一个很有用的功能。通过在浏览器地址栏输入 chrome://flags/#enable-offline-mode,启用“激活离线缓存模式”可以开启离线模式。

不要忘记重启 Chrome 浏览器使设置生效。

5. 可将 HTML 拖放到编辑器

有时你需要复制你的 HTML 元素到编辑器。取代手动复制和粘贴到编辑器,现在你可以更加便捷地拖动 DOM(文本对象模型)并将其放置进编辑器内想要的位置。

目前,你只能拖动一个元素,而且它的子元素不会被一并拖动过来。这方面的缺陷可能会在以后的版本里得到改善。

6. CSS 审核

现在你可以对你的 CSS 进行审核,比如检查没有在 web 页面使用的无用的样式规则。在“Audits”(审核)选项,点击“Run”(运行)按钮,你将会看到一个目前在该页面没有使用到的类/选择器的列表,如下图所示:

7. 增加 SourceMap

使用 SourceMap,你可以看到未创建或未编译的 CSS 或 JavaScript (JS)版本。此功能对于那些在创作风格或者脚本语言上使用 Sass、 LESS 或者 CoffeeScript 作为预处理器的开发者来说是非常有用的。启用 SourceMap,你可以通过某行某列的具体数字找到生成的 JS 或 CSS 的代码位置。最新版本的 Chrome 允许你手动添加 SourceMap。

要做到这一点的话,首先你要确保处于源面板,接着打开一个文件,在那之后右键单击并选择 Add Source Map. 添加到 .map 文件。

原文出处: Agus   译文出处: evget

相关 [开发 google chrome] 推荐:

Google Chrome扩展开发指南全部翻译工作完成

- beralee - cnBeta.COM
感谢金山说下次我们翻译啥?的投递. 360极速浏览器一批工程师用业余时间完成了Chrome extension developer's guide全部翻译工作,放在360极速浏览器应用开放平台的开发文档里供大家参考学习.

Google称正在针对Lion新特性努力开发Chrome

- Joe - cnBeta.COM
谷歌Chrome浏览器高级副总裁桑达・皮查伊(Sundar Pichai)周四表示,谷歌正在升级Chrome以更好支持苹果新款Mac OS X Lion系统. 皮查伊表示,尽管Chrome技术上可以在Lion系统上运行,但是在执行滚动条、手势导航和全屏模式时还存在一些小问题. 部分漏洞已经在Chrome Canary build分支中得到修正,更强的升级很快就会推出.

开发者不可不知的 Google Chrome 七大新特性

- - 开源中国社区最新新闻
Google Chrome 在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools 同样也是网络开发者进行网络开发的重要工具. DevTools 在不断的进行版本更新,其中有很多重要的更新细节你可能会错过. 在这里罗列了 Google Chrome 最值得关注的七大新特性.

作为Web开发人员,我为什么喜欢Google Chrome浏览器

- liu - 博客园-首页原创精华区
【原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html 】. 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器.

在 Google Chrome 中运行 Termkit

- sprite.evan - 黑客志
Termkit 是由 Steven Wittens 开发的新一代的图形终端( 黑客志之前的介绍 ). Termkit 是基于 Webkit 内核( 就是 Chrome 和 Safari 用的那货 )构建的. 不过 Termkit 有个最大的问题就是,你必须有一个 Mac 并且必须用 OSX 才能用.

Google Chrome使用经验谈

- sylvia - 月光博客
  尽管笔者对于Google Chrome(谷歌浏览器)有着这样那样的偏爱,但是笔者仍然需要诚实告诉你它并不是对所有人都是一个好选择. 当然它有着启动快速、界面简洁的特点,但是对于习惯了IE、Firefox界面的朋友来说也许这并不是一个好选择,除此之外它还是一个挥霍无度的家伙,所以2G内存是它的基础配备,因为就连笔者的4G内存有时都力有不逮,痛并快乐着的确是一个很好的形容.

超酷的 Chrome Experiment :Google Gravity

- Don - 谷奥——探寻谷歌的奥秘
感谢读者 catchz 的提醒. 我们知道 Google 有一个 Chrome Experiments 网站,这里集中了各种各样超酷的 HTML5 效果演示,其中非常有意思的一个就是这个 Google Gravity 万有引力. 打开这个页面(或者在 Google 搜索框输入 Google Gravity ,然后 feeling lucky )后,你会看到 Google 首页所有元素全部以自由落体形式掉到窗口的最下方,你可以随便用鼠标箭头捡起某个东西扔出去.

Google Chrome快捷键大全

- 飞羽飞之猪 - 软件志
相信很多朋友在使用过Google Chrome之后,就会不想回到原先使用的浏览器了,尤其是IE. 没错Google Chrome的优点很多,已经获得了一大部分网友们的用户,软件志现在也是Firefox+Chrome混搭着用. 今天软件志在豆瓣闲逛是看到一篇关于Google Chrome快捷键的帖子,发现很全面,所以就转之.

Google发布chrome HTML5应用

- Amom - Solidot
游戏番茄 写道 "早在5月份Google就宣布旗下产品Gmail、Calendar、Docs将支持基于HTML5离线的访问. 如今终于实现了,上述Web服务以应用的方式发布在Chrome商店. 现在进入相关产品页面会提示是否开启离线功能,并引导安装离线版产品应用. 安装后启动新的chrome窗口会显示已安装的新应用,这样即使你离线的情况下,你仍然可以正常访问和使用已经保存在本地数据库的内容.

官方 Chrome 扩展 Google Translate for Google+

- Qian - 谷奥——探寻谷歌的奥秘
其实这是个挺无聊也挺没技术含量的Chrome扩展,不过因为是Google官方的所以还是捎带手说一下. Google员工Josh Estelle做了这个Google Translate for Google+扩展,安装之后即可在每个Google+信息流里看到一个新的Translate按钮,点击即可将信息流或评论翻译成Google Translate所支持的任何语言.