概述:Google Chrome在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools同样也是网络开发者进行网络开发的重要工具。本文介绍了其七大重要新特性.
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文件。
本文翻译自hongkiat.com 10月9日文7 New Google Chrome Features You Should Know
相关推荐
Chrome 开发者工具中文手册
Google Chrome 开发者版.zip
Chrome开发者工具的功能很强大,要了解其所有功能最好是查看官方文档,但我们访问官方文档并不是很方便,因此这里将官方的英文文档打包成了CHM格式,可以下载到本机方便查阅,为了在CHM阅读器中接近原文显示效果和不...
谷歌调试移动端工具chrome-inspect离线开发者工具包@194530_@196351.rar
开发者工具Sublime Text、chrome.docx
chrome canary 开发者专用专用专用~
彻底禁用Chrome插件停用开发者模式提示插件,下载后将dll文件放在和Chrome.exe同目录然后重启浏览器即可。
但是,即便到现在,有很多基础的概念和原则依然需要开发者高度注意。下面,向大家介绍这些应该遵循的开发原则。 1、善用DIV来布局 2、将HTML标签和CSS样式表分割开来 3、优化CSS代码 4、优化Javascript文件...
chrome_dev, 谷歌浏览器开发者版本,win64,74.0.3702.0,2019年3月27日。
开发者专用的每日构建版 站上网络科技最前沿。 开发能满足下一版网络要求的网站 测试先进的网络平台 API 每晚更新
Chrome开发者工具指南.介绍Chrome开发。特么利于前端开发
轻松玩转chrome开发者模式
用于解决Chrome浏览器弹出”停用开发者模式“警告的bat,关闭Chrmoe浏览器后右键点击该文件,选择“以管理员身份运行”即可。
解决chrome浏览器开始打开的提示“请停用以开发者模式运行的扩展程序“。
彻底禁用Chrome的“请停用以开发者模式运行的扩展程序”提示,附工具下载 使用说明:见我博客
基于更强大的JavaScript V8引擎极强高效超快的浏览器,谷歌浏览器是一款可让您更快速、轻松且安全地使用网络的浏览器,它的设计超级简洁,使用起来更加方便,Google Chrome支持多标签浏览,每个标签页面都在独立的...
谷歌 Chrome Google翻译 划词翻译 插件方法,chrome 设置-扩展程序,点右上角的开发者模式 ,然后加载已解压的扩展程序
适用于中国大陆的Google开发者的Chrome扩展程序
由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!
1、谷歌浏览器的Chrome同步助手插件目的...打开浏览器的扩展程序,打开开发者模式,把浏览器窗口放小些,把下载好的Chrome同步助手的.crx文件拖拽到扩展程序页面。接下来按照提示进行点击即可,安装过程十分简单快捷。