概述: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开发者工具(Chrome DevTools)是Google Chrome浏览器内置的一套强大的Web开发和调试工具,它为前端开发者提供了丰富的功能,帮助他们实现对网页的实时编辑、性能分析、网络请求检查等任务。在Mac操作系统上...
总之,Postman作为一款强大的Chrome插件,提供了全面的HTTP请求发送和调试功能,无论对于开发者、测试人员还是API使用者,都是不可或缺的工具。通过熟练掌握Postman的使用,能极大地提高开发和测试的效率,同时简化...
2. 特性检测:通过JavaScript进行特性检测,而不是浏览器检测,可以确保在不支持新特性的浏览器中提供回退方案。 四、使用polyfills和shims 对于那些老版本浏览器不支持的新特性,可以使用polyfills(补丁库)和...
总结,JavaScript调试工具是开发者不可或缺的伙伴,它们能够帮助我们定位问题、提升代码质量、优化性能,提高开发效率。无论是浏览器内置的工具还是独立的IDE,都能满足不同程度的调试需求。熟悉并熟练运用这些工具...
Node.js的版本更新非常频繁,社区通常鼓励开发者使用最新版本以获取最新的特性和性能改进,同时也应当注意向后兼容性问题,以确保旧代码在新版本中仍能正常工作。 从给定文件内容可见,Node.js的Right Way,即正确...
"android tools"这个主题聚焦于Android测试工具,这些工具是开发者在构建、调试和优化应用程序时不可或缺的助手。"tools now"标签可能暗示我们关注的是即时可用和最新的工具。 一、Android Studio Android Studio...
综上所述,《HTML5指南》涵盖了HTML5的核心特性和最佳实践,对于希望深入了解和掌握HTML5的Web开发者来说是一本不可或缺的参考书。通过学习本书的内容,开发者可以更好地利用HTML5的强大功能,构建出更加高效、安全...
总之,"8.7driver_win.rar" 提供的是一个用于Selenium自动化测试的ChromeDriver版本,对于需要使用Chrome浏览器执行自动化任务的开发者来说,是一个必不可少的工具。正确配置和使用它,可以极大地提升Web应用测试的...
它简化了XPath的学习过程,提高了开发效率,是每一个Web开发人员和爬虫爱好者不可或缺的辅助工具。通过使用这个插件,你将能够更好地理解和利用XPath的强大功能,从而在Web开发的世界中游刃有余。
在IT行业中,远程工具是必不可少的利器,它们允许用户通过网络连接到另一台计算机,进行桌面控制、文件传输、远程协助等各种操作。标题中的“比较好用的远程工具”指的是那些性能稳定、操作简便且功能丰富的远程访问...
在移动Web开发中,响应式设计是必不可少的,它允许网站根据用户的设备屏幕大小自动调整布局。Bootstrap、Flexbox或Grid CSS布局系统可以帮助实现这一点。同时,要考虑不同设备的分辨率和像素密度,确保图片和图标在...
随着互联网的发展,JavaScript已成为Web开发不可或缺的一部分。了解并熟练掌握JavaScript不仅可以提升个人技术实力,还能在实际工作中解决复杂问题,提高工作效率。 #### 三、搭建JavaScript开发环境 ##### 1. 集成...
学习React Native的过程中,了解如何使用Chrome开发者工具和React Native Debugger进行应用调试是必不可少的。同时,理解如何优化应用性能,包括减少组件渲染次数、使用PureComponent和shouldComponentUpdate等策略...
1. Chrome DevTools:谷歌浏览器内置的强大开发工具,包括Sources、Elements、Console、Network等多个面板。Sources面板用于查看和编辑源代码,设置断点;Elements面板用于查看和修改HTML元素;Console面板显示日志...
1. 服务(Service):无论是原生应用还是Web应用,后端服务对于数据存储、业务逻辑处理等都是必不可少的。 2. E-mail:电子邮件是移动设备用户通信的基本方式之一。 3. WebKit:是一个开源的浏览器引擎,用于渲染...
2. 行内元素(例如 `span`):只占据自身内容宽度,不可设置宽高。 3. 行内块元素(例如 `img`):结合了块元素和行内元素特性,可设置宽高,但与其他元素并排。 九、CSS的背景 1. 背景颜色:`background-color`。 ...
在制作高压缩安装包时,资源优化是必不可少的步骤。这包括: 1. 图片和音频的压缩:使用专门的图像和音频压缩工具,如TinyPNG、MP3 Diags等,可以显著减小这些媒体文件的大小。 2. 代码混淆和压缩:对于JavaScript或...