Google Chrome七大新特性
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 文件。
Google Chrome七大新特性的更多相关文章
- 5分钟学会Java9-Java11的七大新特性
现在Java有多元化的发展趋势,既有JS又有C++还有C#的影子,不学习那是不行滴. 来来来,花5分钟看看Java9-Java11的七大新特性,还有代码样例. Java11 发布了,然而很多公司还在用 ...
- Tomcat 7 的七大新特性
英文原文:Top 7 Features in Tomcat 7: The New and the Improved Tomcat的7引入了许多新功能,并对现有功能进行了增强.很多文章列出了Tomcat ...
- Tomcat 7 的七大新特性(更容易将Tomcat内嵌到应用去中去 )
Tomcat的7引入了许多新功能,并对现有功能进行了增强.很多文章列出了Tomcat 7的新功能,但大多数并没有详细解释它们,或指出它们的不足,或提供代码示例.本文将明确描述TOMCAT 7中七个最显 ...
- 趋势:Chrome为打包应用提供强大新特性
Chrome 7月9日刚为Chrome打包的应用提供了强大的访问Google服务例如Google统计.GoogleAPI和Google 钱包的能力,除此之外,还能够使用系统层面的服务包括蓝牙和原生应用 ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- HTML5和CSS3新特性一览
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
- 有史来最大改变 Android 5.0十大新特性
有史来最大改变 Android 5.0十大新特性 2014.10.16 14:51:31 来源:腾讯数码作者:腾讯数码 ( 0 条评论 ) 距离Android系统上一次重大更新不到一年的时间,谷歌 ...
- Google Chrome 调试
[原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用F ...
- 使用Modernizr探测HTML5/CSS3新特性(转载)
转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...
随机推荐
- 采用handle消息机制实现轮播效果
// 自动轮播条显示 if (mhandle == null) { mhandle = new Handler() { public void handleMessage(Message mes) { ...
- iOS 实现进度条(progress)
#import <UIKit/UIKit.h> @interface ZSDProgressView : UIView { UIView *progressView;//进度view } ...
- [ASP.Net]TableLayoutPanel的使用
以前都是使用Panel.没有用过其他容器类.郁闷,要控制界面的自适应真是麻烦.平常用一用dock.anchor差不多了,但是,更复杂的情景下,就没法了.例如一行有多个控件,有的要求跟据窗口缩放,只缩放 ...
- leetcode题解: Remove Duplicates from Sorted List(已排序单链表去重)
题目: Given a sorted linked list, delete all duplicates such that each element appear only once. For e ...
- 最初步的正则表达式引擎:nfa的转换规则。
[在此处输入文章标题] 正则到nfa 前言 在写代码的过程中,本来还想根据龙书上的说明来实现re到nfa的转换.可是写代码的时候发现,根据课本来会生成很多的无用过渡节点和空转换边,需要许多的代码.为了 ...
- POJ 3268 Silver Cow Party (Dijkstra)
Silver Cow Party Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13982 Accepted: 6307 ...
- WGS84坐标系下,经纬度如何换算成米
参考博客:显示瓦片地图 http://www.cnblogs.com/rhinoxy/p/4995731.html 注意:这里的计算方法精度相差比较大,不满足精确计算的需要. 需要理解的GIS概念: ...
- AspNetPager学习使用2
接上回: <webdiyer:aspnetpager id=" FirstPageText="首页"LastPageText="尾页" Next ...
- JAVA环境变量JAVA_HOME、CLASSPATH、PATH设置详解
Windows下JAVA用到的环境变量主要有3个,JAVA_HOME.CLASSPATH.PATH.下面逐个分析. JAVA_HOME 指向的是JDK的安装路径,如C:\jdk1.5.0_06,在这路 ...
- Handler发送Message
用Handler更新UI package activity.cyq.handlermessage; import android.content.res.Resources; import andro ...